多语言文本框

简介

多语言文本框可同时输入三种语种的信息,中文,英文繁体,除此之外,其他本质和文本框没什么区别。


使用方法

2.1 静态框架使用方法EAS7.5
<wafctrl:multiLangBox id="id" name="name" />
2.2 JS动态创建EAS8.0+
var options = {
    title:'multiLangBox' ,id:'multiLangBox',name:"multiLangBoxName",
    langs:[
            {lang: "l1", alias: "EN", text: "English"},
            {lang: "l2", alias: "CN", text: "简体中文"},
            {lang: "l3", alias: "TW", text: "繁體中文"}
          ]
};
var dom = waf.createDOM("multiLangBox", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("multiLangBox", options, dom);
2.3 通用DOM创建EAS8.0
<div class="ui-multiLangBox ">
    <div class="ui-multiLangBox-layout">
    <input id="txt_id" type="text" name="txt_id_el" class="ui-multiLangBox-input enter2tab" ctrlrole="multiLangBox" data-domcreated="true">
    </div>
    <input type="hidden" id="txt_id_el" name="txt_id" value="{l1:null,l2:null,l3:null}">
</div>
<!--DOM创建好之后,使用js初始化控件-->
$("#id").wafMultiLangBox(option);
2.4 方法&事件使用EAS7.5+
//调用方法
waf("#id").wafMultiLangBox('method', parameter...);
//eg:获取和设置值
waf("#id").wafMultiLangBox("getValue");
waf("#id").wafMultiLangBox("setValue");
//eg:更改事件
waf("#id").wafMultiLangBox("option","onchange",fn);

属性说明

disabled Boolean 缺省值: false EAS7.5+

规定多语言文本框为禁用状态,默认值为false

height String 缺省值: null EAS7.5+

​定义多语言文本框的高度,值可以是整数、百分比或字符串

hidden Boolean 缺省值: false EAS7.5+

定义多语言文本框是否不可见

id String 缺省值: null EAS7.5+

定义多语言文本框的id

maxlength Integer 缺省值: null EAS7.5+

规定多语言文本框中字符的最大长度。中文为两个字符

minlength Integer 缺省值: null EAS8.2+

规定多语言文本框中字符的最小长度。中文为两个字符

name String 缺省值: null EAS7.5+

定义多语言文本框的名称

readonly Boolean 缺省值: false EAS7.5+

​规定多语言文本框为只读状态,不能修改,但可以选中或者拷贝,默认值为false

style String 缺省值: null EAS7.5+

定义多语言文本框的样式

tabindex Integer 缺省值: 0 EAS7.5+

定义按下tab键时多语言文本框控件获得焦点的顺序,默认值为0

tagClass String 缺省值: null EAS7.5+

定义多语言文本框样式类,可以添加一个或多个

langs Array 缺省值: 见下 EAS7.5+

定义多语言文本框的语种列表,lang的缺省值为JSON对象,默认为

[
  {lang:"l1",alias:"EN",text:"English"},
  {lang:"l2",alias:"CN",text:"简体中文"},
  {lang:"l3",alias:"TW",text:"繁體中文"}
]

value String 缺省值: null EAS7.5+

定义多语言文本框的初始值,初始值必须是对象且对象的字段名称需要和语种(langs)参数的lang属性对应.比如:

{"l1":"China","l2":"中国","l3":"中國"}

width String 缺省值: null EAS7.5+

定义多语言文本框的宽度,值可以是整数、百分比或字符串

defaultLang String 缺省值: CN EAS7.5+

定义多语言文本框的默认语种,如果指定的语种在语种列表中不存在,则使用语种列表的第一个作为默认语种


方法说明

option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置多语言文本框某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值.[参考样例]

  • 参数说明:
  • property-必要参数,多语言文本框的属性
  • value-可选参数,多语言文本框的属性值
  • 返回值说明: 无或者属性值

getValue 参数: ([lang]) 返回值类型: (String) EAS7.5+

按照指定的语种,获得多语言文本框中的数据.[参考样例]

  • 参数说明:
  • lang-可选参数,指定取得语种的数据,如果未指定,取默认值。
  • 返回值说明: 无

setValue 参数: (value,[lang]) 返回值类型: (none) EAS7.5+

设置多语言文本框中的数据.[参考样例]

  • 参数说明:
  • value-必选参数,设置的数据
  • lang-可选参数,指定数据的语种,当lang参数不存在时,表示设置当前语种的数据
  • 返回值说明: 无

事件说明

onchange 参数:(event,ui) 返回值:(boolean) EAS7.5+

多语言文本框中的值发生改变,在失去焦点或按下回车键后将触发onchange事件[参考样例]
参数说明:
-event-所响应的事件
-ui-ui.previous为改变前的值,ui.current为改变后的值,ui.lang为改变值的语种
返回值说明:当返回false时,事件被取消,多语言文本框中的值不发生改变

onlangchange 参数: (event,ui) 返回值:(boolean) EAS7.5+

多语言文本框中的语种发生改变将触发onlangchange事件[参考样例]
参数说明:
event-所响应的事件
ui-ui.previous为改变前的语种,ui.current为改变后的语种
返回值说明:当返回false时,事件被取消,多语言文本框中的语种不发生改变.

onfocus 参数: (event) EAS7.5+

多语言文本框获得焦点时将触发onfocus事件

onblur 参数: (event) EAS7.5+

多语言文本框失去焦点将触发onblur事件

onclick 参数: (event) EAS7.5+

多语言文本框被单击时将触发onclick事件

ondblclick 参数: (event) EAS7.5+

多语言文本框被双击时将触发ondblclick事件

onkeyup 参数: (event) EAS7.5+

在多语言文本框上释放按键时,将触发onkeyup事件

onkeydown 参数: (event) EAS7.5+

在多语言文本框上按下键盘上的键时,将触发onkeydown事件

onkeypress 参数: (event) EAS7.5+

当浏览器捕获到多语言文本框有键盘输入时触发onkeypress事件

onmouseover 参数: (event) EAS7.5+

当鼠标指针进入多语言文本框内时,触发onmouseover事件

onmouseup 参数: (event) EAS7.5+

当鼠标指针在多语言文本框内,并且鼠标按键被释放时,触发onmouseup事件

onmousedown 参数: (event) EAS7.5+

当鼠标指针在多语言文本框内按下鼠标键时,触发onmousedown事件

onmouseout 参数: (event) EAS7.5+

当鼠标指针离开多语言文本框时,触发onmouseout事件

onmousemove 参数: (event) EAS7.5+

当鼠标指针在多语言文本框内移动时,触发onmousemove事件


样例集合

  1. 多语言文本框属性
  2. 多语言文本框方法
  3. 多语言文本框事件
  4. 多语言文本框动态化