jQuery EasyUI basierte Plug - Searchbox Suchfeld
jQuery Plugin EasyUI Mit $ außer Kraft setzen .fn.searchbox.defaults die Standardeinstellungen zurück.
Suchfeld (searchbox) fordert den Benutzer auf einen Suchwert eingeben. Es kann mit einem Menü kombiniert werden, die der Benutzer Kategorien auszuwählen unterschiedliche Suche ermöglicht. Wenn Sie auf die Schaltfläche Suchen auf der rechten Seite der Komponente klicken, wenn der Benutzer die ENTER-Taste oder der Suchvorgang ausgeführt wird.
Verlassen Sie sich
- menubutton
Verwendung
Erstellen Sie ein Suchfeld (Searchbox)
1, von Tags erstellt. Die "easyui-searchbox 'Klasse dem <input> Tag hinzugefügt.
<Script type = "text / javascript">
Funktion qq (Wert, name) {
alert (Wert + ":" + name)
}
</ Script>
<Input id = "ss" class = "easyui-searchbox" style = "width: 300px"
Daten-Optionen = "Sucher: qq, prompt: 'Bitte Eingabewert', Menü: '# mm'"> </ input>
<Div id = "mm" style = "width: 120px">
<Div Daten-Optionen = "name:" alle ", iconCls: 'icon-ok" "> Alle Nachrichten </ div>
<Div Daten-Optionen = "name:" Sport ""> Sports News </ div>
</ Div>
2 ist die Programmierung erstellt.
<Input id = "ss"> </ input>
<Div id = "mm" style = "width: 120px">
<Div Daten-Optionen = "name:" alle ", iconCls: 'icon-ok" "> Alle Nachrichten </ div>
<Div Daten-Optionen = "name:" Sport ""> Sports News </ div>
</ Div>
$ ( '# Ss'). Searchbox ({
Sucher: function (Wert, name) {
alert (Wert + "," + name)
},
Menü: '# mm',
prompt: 'Bitte Eingabewert'
});
Immobilien
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
Weg
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 Plugin EasyUI