5. 构造控件自定义函数，简化控件的使用。
从前面实例中可以看出控件的定义是比较繁琐的，如果将一些常用的控件通过函数形式加以定义和调用，这将大大简化控件的使用。函数可以将控件的许多标准属性加以固化，同时又允许用户自己定义一些属性，这些属性往往可被描述为参数。
jQDemos工程创建一个名为fn_function.js的javascript公共文件，该文件中包含各类控件自定义函数，并在以后实例中调用这些函数。这里仅介绍表单panel、字段集容器fieldset、文本框textbox这三个控件的定义函数。
①myForm()函数：定义一个表单，其参数包括id、parent、title、top、left、height、width和style等，分别表示控件标识符、父类容器名、窗体标题、起始显示位置坐标、表单的高度和宽度、表单样式，style参数选项指定表单是否可以最大化、最小化、收缩或关闭。
②myFieldset()函数。定义一个容器，在容器内分组显示各个字段，其参数包括id、parent、title、top、left、height、width等，各参数的含义与myForm()类同。
③myTextField()函数。定义一个textbox文本输入框，其参数包括id、parent、label、labelwidth、top、left、height、width、value、style等。这里label为文本输入框之前的提示符，labelwidth为该提示符的宽度，value为文本框的初值，style为文本框的数据验证方式，包括readonly（只读）、email（邮件格式验证）、url（网址格式验证）、password（密码形式隐藏）、icon（图标显示）等。
控件自定义函数的引用方式与其他插件库JS文件相同，即在<head>…</head>之间添加下列代码：<script type="text/javascript" src="system/Easyui_function.js"></script>。jQDemos控件自定义函数的主要参数如表2-1所示。
表2-1. 控件自定义函数主要参数表
| 参数 |
说明 |
参数 |
说明 |
| id |
控件标识符 |
max |
数字框输入数据的最大值 |
| parent |
父类容器的标识符 |
items |
静态combobox、checkbox、menu等控件的可选项，各选项之间用分号分隔 |
| title |
标题（用于表单、标签页、树、数据网格等控件中） |
cols |
静态combobox、checkbox、menu等控件的可选项，各选项之间用分号分隔 |
| top |
控件在屏幕上显示位置的Y坐标值 |
textfield |
checkbox等控件中选项分行显示时的行高（行间距） |
| left |
控件在屏幕上显示位置的X坐标值 |
masterfield |
checkbox等控件中每行显示的选项个数（即列数） |
| height |
控件的高度 |
keyfield |
动态combobox控件中选项文本列名称 |
| width |
控件的宽度 |
sortfield |
多个combobox控件联动时依赖于主组合框的列名称 |
| label |
编辑型控件输入引导提示符的标签名 |
sql |
数据表的关键字（通常为主键），用于与数据库连接的控件 |
| labelwidth |
引导提示符标签的宽度 |
buttons |
数据表的排序列（缺省时为keyfield的值），用于与数据库连接的控件 |
| value |
文本框等控件的初值 |
tabs |
动态combobox、grid、tree等控件从数据库中提取数据的查询语句 |
| length |
输入数据的最大长度（字符数） |
style |
定义window弹出式窗体控件的按钮，为ok、cancel、save的组合 |
| decimal |
数字框的小数位数 |
|
分页标签控件中各个分页的标题，用分号分隔 |
| min |
数字框输入数据的最小值 |
|
其他属性的选项值（包括最大化、最小化、收缩、关闭等） |
下面以myTextField为例，阐述控件自定义函数的主要设计步骤。
①熟悉和掌握控件的常用属性，确定哪些属性是固定的、哪些是可变的（可设置的）；把可变的属性定义为参数。为此确定textbox的主要参数为id, parent, label, labelwidth, top, left, height, width, value, style等。
function myDefineTextField(id, parent, label, labelwidth, top, left, height, width, value, style){
②默认值设置。例如：如果父类容器标识符为空，则设置为main，文本框的高度位0，则设置为系统默认值（这里由systext.height变量给定，默认值为24px）。
if (parent=='') parent='main';
if (height==0) height=systext.height;
③根据参数label的值，确定是否需要创建一个输入提示符label文字标签。当label参数值为非空时，调用myFieldLabel()创建一个文字标签。如果labelwidth为0时，文字标签与文本编辑框分行显示。
if (label!='' && labelwidth==0){
myFieldLabel(id,parent,label,labelwidth,top,left+2); //创建文字标签
top=1*(top+syslabel.fontsize+syslabel.topmargin+2); //换行显示文本框
labelwidth=0;
}else{
myFieldLabel(id,parent,label,labelwidth,top,left); //创建文字标签
}
}
④创建文本框控件，需要在其外面添加一个层（这个层也有id），以帮助确定其绝对位置。创建文本框的HTML语句保存在一个变量（str）中。如果文本框的初值参数value非空，则在HTML定义中添加初值设置。之后使用append语句将控件添加到父类容器中去。
var str='<div id="'+id+'_div"><input ';
if (value!=undefined && value!=''){ //设置初值
str+=' value="'+value+'"';
}
str+=' class=“easyui-validatebox EasyUI-textbox" type="text" id="'+id+'" style="padding:0px 6px 0px
6px;" ></div>';
$("#"+parent).append($(str));
④创建控件之后，根据函数中的参数值，设置控件的相关属性。控件位置等属性在层<div>的样式CSS中设置，这里通过调用myTextCss()函数实现。控件的高度在textbox({height:?})设置。
$("#"+id+'_div').css(myTextCss(top,1*(left+labelwidth),height,width));
$("#"+id).css({height:"100%", width:"100%"});
$("#"+id).textbox({height: height});
⑤设置文本框的其他自定义属性（如xparent、xid、xlabel等），这些属性不是EasyUI本身拥有的，而是为了程序设计方便，程序员自己添加的。
$("#"+id).attr('xparent',parent); //自定义属性，父类容器的标识符
$("#"+id).attr('xlabel',label); //自定义属性，输入提示符
$("#"+id).attr('xid',id); //自定义属性，控件本身的标识符
⑥根据style参数值设置控件的其他属性，例如：控件是否只读，是否按email格式、url格式验证数据。如果style中包含password字符，则文本框按密码形式输入。这项功能通过调用myFieldStyle()函数实现，即：myFieldStyle(id,style);
myTextField()函数应用举例：
myDefineTextField('email','myFieldset1','Email：', 70, 20, 12, 0, 180, '[email protected]', 'email');
myDefineTextField('psw','myFieldset1','密码：', 70, 55, 12, 0, 180, '888, 'password');
myDefineTextField('pycode','myFieldset1','姓名拼音：', 70, 55, 12, 0, 180, ' ', 'readonly');
下面给出myTextField()、myFieldLabel()、myTextCss()、myFieldStyle()这四个函数的完整程序代码：
程序2-5-1：文本框定义函数myTextField()
function myTextField(id,parent,label,labelwidth,top,left,height,width,value,style){
var str='';
if (parent=='') parent='main';
if (height==0) height=systext.height;
if (labelwidth==0 && label!=''){
myFieldLabel(id,parent,label,labelwidth,top,left+2);
top=1*(top+syslabel.fontsize+syslabel.topmargin+2); //换行显示文本
labelwidth=0;
}else{
myFieldLabel(id,parent,label,labelwidth,top,left);
}
str+='<div id="'+id+'_div"><input ';
if (value!=undefined && value!=''){ //设置初值
str+=' value="'+value+'"';
}
str+=' class=“easyui-validatebox easyui-textbox" type="text" id="'+id+'" style="padding:0px 6px 0px 6px;" ></div>';
$("#"+parent).append($(str));
$("#"+id+'_div').css(myTextCss(top,1*(left+labelwidth),height,width));
$("#"+id).css({height:"100%", width:"100%"});
$("#"+id).textbox({height: height});
$("#"+id).attr('xparent',parent); //自定义属性，父类容器的标识符
$("#"+id).attr('xlabel',label); //自定义属性，输入提示符
$("#"+id).attr('xid',id); //自定义属性，控件本身的标识符
myFieldStyle(id,style);
}
程序2-5-2：控件中的文字标签label子定义函数myFieldLabel()
function myFieldLabel(id,parent,label,labelwidth,top,left){
//定义控件中的label
if (label!=undefined && label!=''){
$("#"+parent).append("<label id='label"+id+"' align='"+syslabel.align+"'>"+label+"</label>");
if (labelwidth>0){
$("#label"+id).css(myLabelCss(top+syslabel.topmargin,left,0,labelwidth));
}else{
$("#label"+id).css(myLabelCss(top,1*left+2,0,label.length*syslabel.fontsize));
top=1*(top+syslabel.fontsize+syslabel.topmargin); //换行显示文本
}
}else labelwidth=0;
}
程序2-5-3：文本框控件样式CSS子定义函数myTextCss()
function myTextCss(top,left,height,width){
var str='';
var css='';
if (top!=undefined && left!=undefined){
str='var css={padding:"0px 2px 0px 4px", position: "absolute", top:"'+top+'px", left:"'+left+'px"';
if (width!=undefined && width>0){
str+=', width: '+width;
}
if (height!=undefined && height>0){
str+=', height: '+height;
}
str+=', "z-index":2};\n';
}else{
str+="\n";
}
eval(str);
//console.log(str);
return css;
}
程序2-5-4：文本框其他属性特征自定义函数myFieldStyle
function myFieldStyle(id,style){ //设置style只读、图标
if (style!=undefined && style!=''){
var tmp=(style+';').split(';');
for (var i=0;i<tmp.length;i++){
//console.log(tmp[i]);
if (tmp[i]=='readonly') $("#"+id).textbox({readonly: true});
if (tmp[i]=='email') $("#"+id).textbox({validType:'email'});
if (tmp[i]=='url') $("#"+id).textbox({validType:'url'});
if (tmp[i]=='password') $("#"+id).textbox({type:'password'});
if (tmp[i].indexOf('icon:')>=0){
var x1=tmp[i].indexOf('icon:');
var x2=tmp[i].indexOf(';',x1+1);
if (x1>=0 && x2>0) var icon=tmp[i].substring(x1+5,x2-1);
else var icon=tmp[i].substr(x1+5,255);
//$("#"+id).textbox({iconCls: icon}); //
$("#"+id).textbox({buttonIcon: icon});
}
}
}
}
相关知识点：
①string.split函数：将一个字符串按某个分隔符进行分割后，将分隔的各个值存储到一个数组变量中。例如:
var xfields="stuid;stuname;gender;birthdate;address";
var tmp=xfields.split(';');
这是将xfields中的字符按分号（;）去分割，之后得到5个字符串，存放到数组tmp中。
②eval()函数：可计算某个字符串，并执行其中的JavaScript代码。例如：
eval("var x=100; var y=x+10;");
命令执行后，得到x和y两个变量，其值分别为100和110。又如：
var data='{stuid:"2014540101", name:"贾宝玉"}';
eval("var source="+data);
alert(source.name);
命令执行后，在屏幕上显示“贾宝玉”这个字符串。