xmlplus组件设计系列之文本框(TextBox)(3)
文本框是页面中最常用的输入组件,它的默认使用方式如下:
当然,这里的`type='text'可以略去不写。大部分情况下,使用默认的文本框作为输入组件是没什么问题的,但在具体的项目中,难免会有功能扩展的需求。这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件。除了本章的内容,你也可以参考官方文档中的参数映射一章。
目标组件的功能分析
对于原生的文本框,我们获取到的值是文本类型的,就像下面的示例所展示的:
Example:{ xml:"", fun:function(sys,items,opts){ console.log(typeofthis.prop("value"));//string } }
如果需要其它类型的数值,就需要对获取到的数据进行格式化操作。比如,如果需要整型数,就需要用到parseInt函数;如果需要浮点型数,就需要用到parseFloat函数。如果我们能够将格式化数据的操作封装起来,那使用起来一定会相当的方便。为了明确我们的预期,不妨先给出目标组件的使用示例。
Index:{ xml:"\ \ \
此示例实例化了两个组件Input。组件Input允许接收一个format参数作为其静态接口输入,并提供一个属性value作为其动态输入输出接口。format参数有三种可能的值:string(默认)、int以及float。这三种值分别对应三种数据类型:字符串型、整型和浮点型。属性value根据format的值来进行格式化输入输出。示例的输出结果应该会是下面这样子:
hello,world
227
目标组件的实现
为了完成上面的目标组件,我们先给出一个文本框的组件框架。
TextBox:{ xml:"", opt:{format:"string"}, fun:function(sys,items,opts){ varparse={"int":parseInt,"float":parseFloat,"string":String}[opts.format]; functiongetValue(){ //这里需要获取input的值并根据opts.format值选择适当的格式化函数, } functionsetValue(value){ //这里需要根据opts.format值选择适当的格式化函数,对value进行格式化后同去赋值 } returnObject.defineProperty({},"value",{get:getValue,set:setValue}); } }
上面关键的地方在于格式化函数的选取,为了简单化,我们采用的是表查询方式。在组件初始化阶段该函数就已经准备就绪了,上述的parse函数即所需的格式化函数。不过需要注意的是,该组件的格式化函数类型在组件初始化时就固定了。如果需要可变的格式化函数,你需要对组件做些修正。好了,下面可以给出完整的的文本框组件了。
TextBox:{ xml:"", opt:{format:'string'}, map:{attrs:{input:"disabledvalueplaceholderreadonly"}}, fun:function(sys,items,opts){ varparse={"int":parseInt,"float":parseFloat,"string":String}[opts.format]; functiongetValue(){ returnparse(sys.input.prop("value")); } functionsetValue(value){ sys.input.prop("value",parse(value)); } returnObject.defineProperty({},"value",{get:getValue,set:setValue}); } }
另外请注意,上面组件添加了部分属性映射的内容,这可以在具体的项目中根据需要进行增删。
本系列文章基于xmlplus框架。如果你对xmlplus没有多少了解,可以访问www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。