文档章节

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

qudou
 qudou
发布于 2017/04/26 10:07
字数 730
阅读 48
收藏 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
xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

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

qudou
2017/04/27
677
2
全栈 JavaScript 框架--xmlplus

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

qudou
2017/04/21
1K
1
JavaScript 框架 xmlplus 1.5.12 发布

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

qudou
2017/05/24
528
0
Windows Phone 7 - 控件的基本使用

原文地址:http://create.msdn.com/en-US/education/quickstarts/UsingControls 【译 者注:这篇文章是翻译自微软官方的WP7 QuickStart的第三篇,讲述WP下控件的基本使用方法。部分内容加入了...

虫虫
2012/02/21
210
0

没有更多内容

加载失败,请刷新页面

加载更多

Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
18分钟前
1
0
php-fpm配置文件详解

第一部分:FPM 配置 参数          | 说明 -p            | 命令行中动态修改--prefix   ;include=etc/fpm.d/*.conf  | 用于包含一个或多个文件,如果glob(3)存在(...

bengozhong
20分钟前
1
0
Django允许外部ip访问

1、关闭防火墙 service iptables stop 2、设置django 开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python manage.py runserver 0.0.0.0:9000 3、在settings里修改ALLOWED_HOSTS = [......

MichaelShu
23分钟前
1
0
机器学习在客户管理场景中的应用

使用机器学习进行客户管理,我们可以得到客户360度全方位的视图。 本文以SAP Cloud for Customer的客户管理应用为例,介绍机器学习是如何同传统的客户管理应用进行集成的。 打开SAP C4C的客户...

JerryWang_SAP
30分钟前
1
0
ftp链接ubuntu虚拟机

1.在主机上安装Xftp 5 2.在虚拟机中输入: sudo apt-get install vsftpd 3.打开 /etc/vsftpd.conf修改如下变量 listen=YES anonymous_enable=YES local_enable=YES write_enable=yes local_......

15834278076
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部