EasyUI Jquery 学习笔记 —— Form（表单）详细版

目录

1.Form（表单）

1.1 textbox（文本框）

1.2 tagbox（标签框）

1.3 Calendar 日历

1.4 passwordbox（密码框）

1.5 maskedbox（掩码框）

1.6 Combogrid 组合网格

1.7 Form 表单

1.8 Timespinner 时间微调器

1.9 DateTimeSpinner 日期时间微调框

1.10 filebox（文件框）

 1.11 checkbox（复选框）

 1.12 Numberbox 数字框

1.13 Spinner 微调器

1.14 Numberspinner 数值微调器

1.15 Combobox 组合框

1.16 Combotree 组合树

1.17 Radiobutton（单选框）

1.18 ComboTreeGrid（树形表格下拉框）

1.19 Slider 滑块 

1.20 Validatebox 验证框

1.21 Datebox 日期框

​1.21 Combo 组合

​1.22 Datetimebox 日期时间框

1.Form（表单）

1.1 textbox（文本框）

扩展自$.fn.validatebox.defaults，使用$.fn.textbox.defaults重写默认值对象。（该组件自1.4版开始可用）

TextBox(文本框)是一个增强的输入字段组件， 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等

依赖关系
•   validatebox
•   linkbutton 

用法

通过标签创建文本框。

<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">

使用Javascript创建文本框。

  <input id="tb" type="text" style="width:300px">

 $('#tb').textbox({
                        buttonText:'Search',
                        iconCls:'icon-man',
                        iconAlign:'left'
                    })

 属性

$('#email').textbox({
                     label: 'Email:'
                     labelPosition: 'top',
                     prompt: 'Ent'
                   });

$('#tb').textbox({
    icons: [{
        iconCls:'icon-add',
    handler: function(e){
        $(e.data.target).textbox('setValue', 'Something added!');
     }
     },{
          iconCls:'icon-remove',
          handler: function(e){
          $(e.data.target).textbox('clear');
     }
      }]
})

事件

事件扩展自validatebox，以下是新增的文本框事件。

方法

方法扩展自validatebox，以下是新增的文本框方法。

 var t = $('#tt');
         t.textbox('textbox').bind('keydown', function(e){
         if (e.keyCode == 13){	// 当按下回车键时接受输入的值。
             t.textbox('setValue', $(this).val());
          }
});

$('#tb').textbox('readonly');	    // 启用只读模式
$('#tb').textbox('readonly',true);	// 启用只读模式
$('#tb').textbox('readonly',false);	// 禁用只读模式

1.2 tagbox（标签框）

扩展自$.fn.combobox.defaults，使用$.fn.tagbox.defaults重写默认值对象。（该组件自1.5.1版开始可用）

TagBox(标签框)扩展自combobox， 他包含combobox的所有功能。TagBox允许用户将输入内容显示在标签框中，而不是显示在输入框中。

 依赖关系

combobox

用法

通过标签创建文本框。

 <input class="easyui-tagbox" value="Apple, Orange" label="Add a tag" style="width:100%