SearchBox(搜索框)
使用$.fn.iSearchbox.defaults重写默认值对象。
搜索框提示用户需要输入搜索的值。它可以结合一个菜单,允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。
依赖关系
用法
1. 使用标签创建。添加'topjui-searchbox'类ID到<input/>标签。
html
<script type="text/javascript">
function qq(value, name) {
alert(value + ":" + name)
}
</script>
<input id="ss" data-toggle="topjui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'">
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>2. 创建程序。
html
<input id="ss">
<div id="mm1" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>javascript
$('#ss').iSearchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'请输入值'
});属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| width | number | 组件宽度。 | auto |
| height | number | 组件高度。 | 22 |
| prompt | string | 在输入框中显示提示消息。 | '' |
| value | string | 输入的值。 | '' |
| menu | selector | 搜索类型菜单。每个菜单项都具备一下属性:name:搜索类型名称。selected:自定义默认选中的搜索类型名称。如下示例定义了一个选择搜索类型名称的搜索框: | null |
| searcher | function(value,name) | 在用户按下搜索按钮或回车键的时候调用searcher函数。 | null |
| disabled | boolean | 定义是否禁用搜索框。 | false |
菜单示例
html
<input data-toggle="topjui-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>方法
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回属性对象。 |
| menu | none | 返回搜索类型菜单对象。见下方代码示例。 |
| textbox | none | 返回文本框对象。 |
| getValue | none | 返回当前搜索值。 |
| setValue | value | 设置一个新的搜索值。 |
| getName | none | 返回当前搜索类型名。 |
| selectName | name | 选择当前搜索类型名。见下方代码示例。 |
| destroy | none | 销毁该控件。 |
| resize | width | 重置组件宽度。 |
| disable | none | 禁用搜索框。 |
| enable | none | 启用搜索框。 |
| clear | none | 清除搜索框。 |
| reset | none | 重置搜索框。 |
方法代码示例
menu方法示例:
下面的例子显示了更改菜单项图标:
javascript
var m = $('#ss').iSearchbox('menu');
// 查找菜单项
m.iMenu('setIcon', { target: item.target, iconCls: 'icon-save' });
$('#ss').iSearchbox('selectName', 'sports');selectName方法示例:
javascript
$('#ss').iSearchbox('selectName', 'sports');