EasyUI的jQuery表单小部件

下面是EasyUI的jQuery表单小部件的完整攻略：

什么是EasyUI

EasyUI是由中国的开源工作者创建的一套基于jQuery的用户界面插件库，它提供了一整套易于使用、高质量的导航菜单、选项卡、表单验证、文件上传等各种插件，能够帮助前端开发者快速搭建一流的Web应用程序。

EasyUI的表单小部件

EasyUI的表单小部件非常普及，可以用来装饰一个表单控件，提高用户体验和交互性。表单小部件包括：日期框、时间框、数字文本框、密码框、多选框、单选框、下拉框等。

下面是一些表单小部件的使用样例：

日期框

<link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>

<input name="dt" id="dt" class="easyui-datebox" required="true" editable="false">

这个样例中，我们创建了一个日期框，用户可以在里面选择一个日期。这个日期框有一个名称属性为"dt"，可以用来提交表单数据。同时，还有一个"class"属性，它是EasyUI插件库提供的，可以用来装饰这个日期框的样式。这个日期框还有一个"required"属性，如果值为true，则代表必填项。如果用户没有选择日期，会提示用户选择日期。

下拉框

<select class="easyui-combobox" name="city" style="width:200px;" data-options="
        url:'get_cities.php',
        method:'get',
        valueField:'id',
        textField:'name',
        panelHeight:'auto'
        ">
</select>

这个样例中，我们创建了一个下拉框，用户可以在里面选择一个城市。这个下拉框有一个名称属性为"city"，可以用来提交表单数据。"class"、"style"属性可以用来装饰这个下拉框的样式。"data-options"属性是EasyUI插件库提供的，它可以设置插件的一些配置项，例如这里的"url"代表要从哪个地址获取城市列表，"valueField"代表提交表单时，选中了哪个城市，将会提交这个城市的"id"值，"textField"代表下拉框每个城市要显示的文本信息，它是一个"name"字段，"panelHeight"代表下拉菜单的高度自适应。

多选框

<input class="easyui-checkbox" type="checkbox" name="check1" value="1">选项一
<input class="easyui-checkbox" type="checkbox" name="check2" value="2">选项二
<input class="easyui-checkbox" type="checkbox" name="check3" value="3">选项三

这个样例中，我们创建了一个多选框，用户可以选中多个选项。这个多选框分为三个部分，每个部分都有一个名称属性，代表选中了哪些选项，这些选项可以通过提交表单的方式传递到服务端。"class"属性可以用来装饰这个多选框的样式。

总结

以上就是EasyUI的jQuery表单小部件的攻略，EasyUI插件库具有功能强大、易于使用、易于自定义等特点，可以大大简化前端工作，让开发者能够专注于业务逻辑的实现。