文档章节

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

qudou
 qudou
发布于 2017/04/26 10:07
字数 730
阅读 48
收藏 0
点赞 0
评论 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
winform开发小技巧

技巧1,合理使用控件的Tag属性 几乎所有winform控件有都名为object类型的Tag属性,此属性多数情况下用来承载完整的数据源,相当于WEBFORM页面中hidden控件的作用,举个简单的例子 C# code textBo...

长平狐
2013/03/28
56
0
Stimulsoft Reports.Net基础教程(一):创建简单的列表式报表①

StimulReport.Net是一个基于.NET框架的报表生成器,能够帮助你创建结构、功能丰富的报表。以下步骤将向您展示如何用Stimulsoft Reports.Net创建一个简单的列表式报表。 1.运行报表设计器; ...

鸟栖沙岩
2016/07/26
21
0
JavaScript 框架 xmlplus 1.5.14 发布

JavaScript 框架 xmlplus 1.5.14 发布了。更新如下: 将原先对于 xmldom 模块的依赖改为 exmldom。exmldom 模块是对 xmldom 模块的扩展,添加了事件支持。也就是说,你可以像前端那样在 dom ...

qudou
2017/06/10
1K
0
小谈ZK框架技巧

ZK是一套以 AJAX/XUL/Java 为基础的网页应用程序开发框架,用于丰富网页应用程序的使用界面。最大的好处是,在设计AJAX网络应用程序时,轻松简便的操作就像设计桌面程序一样。 ZK包含了一个以...

Arthur126
2016/04/29
848
0
一个App完成入门篇(四)- 完成反馈页面

上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画。 导入项目 添加新组件 同步新组件 完成页面布局 输入时加动画效果 弹出日期选择 直接引用UI页...

jonh_felix
2016/04/07
689
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

与女儿谈商业模式 (5):糖果连锁店?

分类:与女儿谈商业模式 2007-08-02 15:27阅读(8394)评论(32)   与女儿谈商业模式(5):糖果连锁店?   陈志武 /文   谈过星巴克、沃尔玛、戴尔以及微软的故事后,给陈笛印象最深的莫...

祖冲之
4分钟前
0
0
Linux平台下RMAN异机恢复总结

潇湘隐者 Linux平台下RMAN异机恢复总结 2017-05-29 16:30 by 潇湘隐者, ... 阅读, ... 评论, 收藏, 编辑 下面总结、整理一下RMAN异机恢复这方面的知识点,这篇笔记在个人笔记里面躺了几年了,...

rootliu
11分钟前
0
0
Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
13分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
37分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
今天
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部