ช่องค้นหาค้นหา - ตามปลั๊กอิน jQuery EasyUI
ปลั๊กอิน jQuery EasyUI โดย $ .fn.searchbox.defaults แทนที่ค่าเริ่มต้นเริ่มต้น
กล่องค้นหา (SearchBox) แจ้งให้ผู้ใช้ป้อนค่าการค้นหา มันสามารถใช้ร่วมกับเมนูที่ช่วยให้ผู้ใช้สามารถเลือกหมวดหมู่การค้นหาที่แตกต่างกัน เมื่อคุณคลิกปุ่มค้นหาไปทางขวาของส่วนประกอบเมื่อผู้ใช้กดปุ่ม Enter หรือการดำเนินการค้นหาจะถูกดำเนินการ
วางใจ
- menubutton
การใช้
สร้างช่องค้นหา (ช่องค้นหา)
1 ที่สร้างขึ้นจากแท็ก 'การ easyui-SearchBox' class เพิ่มไปยัง <input> แท็ก
<ชนิด Script = "text / JavaScript">
ฟังก์ชั่น QQ (มูลค่าที่ชื่อ) {
แจ้งเตือน (ค่า + ":" ชื่อ +)
}
</ script>
<input id = "SS" class = "easyui-SearchBox" style = "width: 300px"
ข้อมูลตัวเลือก = "ค้นหา: QQ, พรอมต์: 'กรุณามูลค่าการป้อนข้อมูล' เมนู '# มม'"> </ input>
<div id = "mm" style = "width: 120px">
<div ข้อมูลตัวเลือก = "ชื่อ: 'ทั้งหมด', iconCls: 'ไอคอนตกลง'"> ข่าวทั้งหมด </ div>
<div ข้อมูลตัวเลือก = "ชื่อ: 'กีฬา'"> ข่าวกีฬา </ div>
</ div>
2, การเขียนโปรแกรมที่สร้างขึ้น
<input id = "SS"> </ input>
<div id = "mm" style = "width: 120px">
<div ข้อมูลตัวเลือก = "ชื่อ: 'ทั้งหมด', iconCls: 'ไอคอนตกลง'"> ข่าวทั้งหมด </ div>
<div ข้อมูลตัวเลือก = "ชื่อ: 'กีฬา'"> ข่าวกีฬา </ div>
</ div>
$ ( '# Ss'). ช่องค้นหา ({
ค้นหา: ฟังก์ชั่น (มูลค่าที่ชื่อ) {
แจ้งเตือน (ค่า + "" + ชื่อ)
}
เมนู: '# มม'
แจ้งให้: 'โปรดป้อนราคา'
});
คุณสมบัติ
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
ทาง
| 名称 | 参数 | 描述 |
|---|---|---|
| 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