搜索框(SearchBox)
用$.fn.searchbox.defaults重写了Defaults 在搜索框提示用户输入搜索值,它可以结合一个菜单允许用户选择不同的搜索类目,搜索事件在用户按下回车键之后激活,当然也可以通过单击搜索组件右侧的搜索按钮触发。依赖(Dependencies)
Menubutton使用示例(Usage Example)
创建搜索框 通过在input标签上加上‘easyi-searchbox’类创建通过javascript创建All NewsSports News
All NewsSports News
$('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'Please Input Value' },2);
属性(Properties)
Name | Type | Description | Default |
---|---|---|---|
width | number | 组件的宽度 | auto |
height | number | 组件的高度,1.3.2新增的属性 | 22 |
prompt | string | 在input框中显示的提示信息 | '' |
value | string | 输入的值 | '' |
menu | selector |
搜索类型菜单,每个菜单项都有以下属性
Name:搜索类型的名字
Selected:当前选中的搜索类型的名字
下面的示例显示怎么定义一个选中的搜索类型名称
Search Item1
Search Item2
Search Item3
|
null |
searcher | function(value,name) | 当用户点击搜索按钮或者按下回车键是触发搜索函数 | null |
方法(Methods)
Name | Parameter | Description |
---|---|---|
options | none | 返回options对象 |
menu | none | 返回搜索类型菜单对象。下面的示例显示了怎么改变菜单项的图标。 var m = $('#ss').searchbox('menu',2);? // get the menu object var item = m.menu('findItem', 'Sports News',2);? // find the menu item // change the menu item icon m.menu('setIcon', { ?????????????? target: item.target, ?????????????? iconCls: 'icon-save' },2); // select the searching type name $('#ss').searchbox('selectName', 'sports',2); |
textbox | none | 返回textbox对象 |
getValue | none | 返回当前搜索的值 |
setValue | value | 设置新的搜索值 |
getName | none | 返回当前搜索类型名称 |
selectName | name | 选择当前搜索类型的名称 代码示例 $('#ss').searchbox('selectName', 'sports',2); |
destroy | none | 销毁搜索组件 |
resize | width | 重置搜索组件的宽度 |