kotak pencarian telusur - berbasis plug jQuery EasyUI
jQuery EasyUI Plugin Dengan $ .fn.searchbox.defaults menimpa default default.
kotak pencarian (telusur) meminta pengguna untuk memasukkan nilai pencarian. Hal ini dapat dikombinasikan dengan menu yang memungkinkan pengguna untuk memilih kategori pencarian yang berbeda. Ketika Anda klik tombol Cari di sebelah kanan komponen ketika pengguna menekan tombol ENTER atau operasi pencarian akan dieksekusi.
mengandalkan
- menubutton
pemakaian
Buat kotak pencarian (telusur)
1, dibuat dari tag. Kelas 'easyui-telusur' ditambahkan ke <input> tag.
<Script type = "text / javascript">
fungsi qq (nilai, nama) {
alert (value + ":" + nama)
}
</ Script>
<Input id = "ss" class = "easyui-telusur" style = "width: 300px"
Data-opsi = "pencari: qq, cepat: 'Silakan Nilai Masukan', menu: '# mm'"> </ input>
<Div id = "mm" style = "width: 120px">
<Div Data-opsi = "Nama: 'semua', iconCls: 'icon-ok'"> Semua Berita </ div>
<Div Data-opsi = "Nama: 'olahraga'"> Sports News </ div>
</ Div>
2, pemrograman dibuat.
<Input id = "ss"> </ input>
<Div id = "mm" style = "width: 120px">
<Div Data-opsi = "Nama: 'semua', iconCls: 'icon-ok'"> Semua Berita </ div>
<Div Data-opsi = "Nama: 'olahraga'"> Sports News </ div>
</ Div>
$ ( '# Ss'). Telusur ({
pencari: function (value, nama) {
alert (value + "," + nama)
},
menu: '# mm',
meminta: 'Silakan Masukan Nilai'
});
milik
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| width | number | 组件的宽度。 | auto |
| height | number | 组件的高度。该属性自版本 1.3.2 起可用。 | 22 |
| prompt | string | 显示在输入框里的提示信息。 | '' |
| value | string | 输入的值。 | '' |
| menu | selector | 搜索类型的菜单。每个菜单项可以有下列的属性： name：搜索类型名称。 selected：当前选择的搜索类型名称。 下面的实例演示了如何定义一个选中的搜索类型名称。 <input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" /> <div id="mm" style="width:150px"> <div data-options="name:'item1'">Search Item1</div> <div data-options="name:'item2',selected:true">Search Item2</div> <div data-options="name:'item3'">Search Item3</div> </div> |
null |
| searcher | function(value,name) | 当用户按下搜索按钮或者按下 ENTER 键时，searcher 函数将被调用。 | null |
cara
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回选项（options）对象。 |
| menu | none | 返回搜索类型的菜单对象。 下面的实例演示如何改变菜单项图标。
var m = $('#ss').searchbox('menu'); // get the menu object
var item = m.menu('findItem', 'Sports News'); // find the menu item
// change the menu item icon
m.menu('setIcon', {
target: item.target,
iconCls: 'icon-save'
});
// select the searching type name
$('#ss').searchbox('selectName', 'sports');
|
| textbox | none | 返回文本框对象。 |
| getValue | none | 返回当前的搜索值。 |
| setValue | value | 设置新的搜索值。 |
| getName | none | 返回当前的搜索类型名称。 |
| selectName | name | 选择当前的搜索类型名称。 代码实例：
$('#ss').searchbox('selectName', 'sports');
|
| destroy | none | 销毁该组件。 |
| resize | width | 重设组件的宽度。 |
jQuery EasyUI Plugin