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　文件框常用方法

上一章目录下一章