2.6 其他高级组件
本节将讲解EasyUI中的一些高级组件，这些组件都是由一些基础组件组合而来，它们的使用非常简单，但是功能却非常强大。
2.6.1 标签框（TagBox）
在前面的章节中我们介绍了组合框的使用方法，当设置组合框属性multiple为true时，组合框支持多选，此时如果需要修改选中内容时，可以在文本框中删除指定内容或者在下拉面板中重新选择。标签框由组合框扩展而来，它可以在文本框内显示标签而不是展示值，此时如果用户需要删除选中的内容，只需在文本框中将标签删除即可，而不需要将内容一个个地删除。
标签框的依赖关系如下：
- combobox
标签框扩展于：
- combobox
标签框的默认配置定义在$.fn.tagbox.defaults中。
1. 创建标签框
使用标记创建标签框的方法如下：
<input class="easyui-tagbox" value="标签元素1,标签元素2" label="请选择">
使用JavaScript创建标签框的方法如下：
01 <input id="tb" type="text" style="width:300px">
02 $('#tb').tagbox({
03 label: '请选择',
04 value: ['标签元素1','标签元素2']
05 });
2. 标签框属性
标签框常用属性说明见表2.45。
表2.45 标签框常用属性
3. 标签框事件
标签框常用事件见表2.46。
表2.46 标签框常用属性
4. 标签框方法
标签框无新增和重写的方法。
2.6.2 搜索框（SearchBox）
搜索框由文本框和菜单按钮组成，用户可以在菜单按钮中选择不同的搜索类型，当用户单击搜索框右侧的图标时就会触发搜索行为。
搜索框的依赖关系如下：
- textbox
- menubutton
搜索框扩展于：
- textbox
搜索框的默认配置定义在$.fn.searchbox.defaults中。
1. 创建搜索框
使用标记创建搜索框的方法如下：
01 <input id="ss" class="easyui-searchbox" style="width:300px"
02 data-options="searcher:qq,prompt:'请输入搜索内容',menu:'#mm'"></input>
03 <div id="mm" style="width:120px">
04 <div data-options="name:'all',iconCls:'icon-ok'">类型一</div>
05 <div data-options="name:'sports'">类型二</div>
06 </div>
07 <script type="text/JavaScript">
08 function qq(value,name){
09 alert(value+":"+name)
10 }
11 </script>
通过JavaScript创建搜索框的方法如下：
01 <input id="ss"></input>
02 <div id="mm" style="width:120px">
03 <div data-options="name:'all',iconCls:'icon-ok'">类型一</div>
04 <div data-options="name:'sports'">类型二</div>
05 </div>
06 $('#ss').searchbox({
07 searcher:function(value,name){
08 alert(value + "," + name)
09 },
10 menu:'#mm',
11 prompt:'请输入搜索内容'
12 });
2. 搜索框属性
搜索框常用属性说明见表2.47。
表2.47 搜索框常用属性说明
searcher属性是搜索框最重要的一个属性，当用户单击搜索图标时，就会运行该属性内定义的方法。其中的参数value为文本框内的值，name参数为用户选择的菜单元素的name属性。
3. 搜索框事件
搜索框无新增和重写事件。
4. 搜索框方法
搜索框常用方法说明见表2.48。
表2.48 搜索框常用属性
2.6.3 文件框（FileBox）
文件框用于用户上传表单文件，扩展自文本框。文件框中可以使用文本框的属性、事件以及方法，但是出于浏览器安全的考虑，部分方法如'setValue'可能无法在文件框上使用。本节将简单介绍文件框的使用方法，在下一节表单中将向读者演示如何利用表单上传文件。
文件框的依赖关系如下：
- textbox
文件框扩展于：
- textbox
文件框的默认配置定义在$.fn.filebox.defaults中。
1. 创建文件框
使用标记创建文件框的方法如下：
<input class="easyui-filebox" style="width:300px">
通过JavaScript创建文件框的方法如下：
01 <input id="fb" type="text" style="width:300px">
02 $('#fb').filebox({
03 buttonText: 'Choose File',
04 buttonAlign: 'left'
05 })
2. 文件框属性
文件框常用属性说明见表2.49。
表2.49 文件框常用属性
accept属性可以限制用户选择的文件类型，例如限制用户只能选择图片，代码如下：
01 $(‘#file’).filebox({
02 accept: ‘image/*’
03 });
其中符号*的含义是允许用户选择所有的image类型文件，常见的accept值见表2.50。
表2.50 常见的accept值
（续表）
3. 文件框事件
文件框无新增或重写属性。
4. 文件框方法
文件框常用方法说明见表2.51。
表2.51 文件框常用方法
