文档章节

xmlplus 组件设计系列之三 - 文本框(TextBox)

qudou
 qudou
发布于 2017/04/26 10:07
字数 730
阅读 49
收藏 0

文本框

文本框是页面中最常用的输入组件,这一章就来看看各种文本框组件的设计与使用。

<img src="http://xmlplus.cn/img/textbox.png" class="img-responsive"/>

原生的文本框

原生的文本框组件非常简单,它只包含一个 input 元素,下面是它的一个使用示例。

// 03-01
Index: {
    xml: "<input id='index' type='text'/>",
    fun: function (sys, items, opts) {
        sys.index.on("input", e => {
            console.log(sys.index.prop("value"));
        });
    }
}

对于组件对象文本的设置与获取,你需要使用系统函数 prop,而不能使用 attr,这与 JQuery 的相关接口的用法是一致的。

使用 Bootstrap 样式

Bootstrap 框架提供了不少输入框组的样式,与上一章一样,我们也可以通过封装以简化对它们使用。下面是一个简单的例子。

// 03-02
TextBox: {
    xml: `<div class="input-group">
              <span class="input-group-addon">https://example.com/users/</span>
              <input id="input" class="form-control" aria-describedby="basic-addon3">
          </div>`,
    fun: function (sys, items, opts) {
        return sys.input;
    }
}

该示例封装了一个允许输入 URL 剩余部分的网址输入框。注意,我们需要在函数项中导出原始文本框对象的系统接口,这样才能方便地对其进行后续操作。

具有格式化功能的文本框

在官方文档中的 参数映射 的相关内已经讲过如何自定义一个可以进行格式化输入输出的文本框,现将已定义的文本框组件重新列出如下:

// 03-03
TextBox: {
    xml: "<input id='input' type='text'/>",
    opt: { format: 'string' },
    map: { attrs: { input: "disabled value placeholder readonly" } },
    fun: function (sys, items, opts) {
        var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
        function getValue() {
            return parse(sys.input.prop("value"));
        }
        function setValue(value) {
            sys.input.prop("value", parse(value));
        }
        return Object.defineProperty({}, "value", { get: getValue, set: setValue });
    }
}

自定义文本框的基本思路是封装原生的文本框组件并对其进行扩展,上面给出的文本框增加了原文本框的格式化输入输出能力。上一节给出的使用 Bootstrap 样式封装的文本框本质上也可以归类为自定义文本框的一种,只是它利用了第三方的内容。

带有选择定位文本功能的文本框

这一节我们来看一个带有选择文本功能的文本框组件。该组件包含两个接口,其中 select 用于选中指定开头和结尾的文本,focus 则用于控制光标的位置。

// 03-04
TextBox: {
    xml: "<input id='input' type='text'/>",
    map: { attrs: { input: "disabled value placeholder readonly" } },
    fun: function (sys, items, opts) {
        var e = sys.input.elem();
        function select(start, end){
            start == undefined && (start = 0);
            end == undefined && (end = e.value.length);
            e.focus();
            e.setSelectionRange(start,end);
        }
        function focus(ptr) {
            ptr == undefined && (ptr = e.value.length);
            return select(ptr, ptr);
        }
        return {focus: focus, select: select};
    }
}

你可以尝试着使用 xmlplus 的继承特性把上一节的组件功能与这一节的组件功能整合在一起。这样你就会得到一个既具备格式化功能,又具备便捷的选择文本与控制光标功能的文本框组件了。

© 著作权归作者所有

共有 人打赏支持
qudou

qudou

粉丝 5
博文 11
码字总数 14933
作品 2
福州
程序员
私信 提问
全栈 JavaScript 框架 xmlplus 1.5.9 发布

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与 npm 版本之间的同步。 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发...

qudou
2017/04/30
3.8K
16
全栈 JavaScript 框架--xmlplus

xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组...

qudou
2017/04/21
1K
1
xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

全栈 JavaScript 框架 xmlplus v1.5.8 正式发布 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏...

qudou
2017/04/27
691
2
JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件...

qudou
2017/05/24
549
0
【更新】Essential Studio for UWP 2018 v4发布

下载Essential Studio for UWP最新版本 Essential Studio for UWP是包含有60 +组件的综合套包,包括最快的图表和网格组件。所有组件根据当前被呈现的设备系列自适应渲染。 DATAGRID 自动生成...

电池盒
01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

2亿用户背后的Flutter应用框架Fish Redux

背景 在闲鱼深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞。对于闲鱼这样的负责业务场景,我们需要一个统一的应用框架来摆脱当下的开发困境,而这也...

阿里云官方博客
25分钟前
2
0
C++生成随机数:高斯/正态分布(gaussian/normal distribution)

高斯分布也称为正态分布(normal distribution)。 常用的成熟的生成高斯分布随机数序列的方法由Marsaglia和Bray在1964年提出,C++版本如下: #include <stdlib.h>#include <math.h> d...

天蚕宝衣
29分钟前
1
0
从 Jenkins 迁移到 Jenkins X:一场持续交付之旅

背景 在 dailymotion,我们信奉 DevOps 最佳实践,并且重度使用了 Kubernetes。我们的部分产品(并非全部)已经部署在 Kubernetes 上。在迁移我们的广告技术平台时,为了赶时髦(作者你这么直...

微笑向暖wx
33分钟前
2
0
Kafka Producer Consumer

Producer API org.apache.kafka.clients.producer.KafkaProducer 如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:...

编程SHA
40分钟前
1
0
在centos上搭建git服务器并自动同步代码

在centos上搭建git服务器并自动同步代码 tortoisegit git centos linux 5k 次阅读 · 读完需要 15 分钟 0 参考文章 CentOS安装Git实现多人同步开发 centos中GIT服务器搭建及使用密钥连接 简述...

linjin200
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部