第二十章：SearchBox（搜索框）組件
學習要點：
- 加載方式
- 屬性列表
- 方法列表
一、加載方式：
1.class 加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<script type="text/javascript">
function qq(name,value){
alert(name + '-' + value);
}
</script>
</head>
<body>
<div class="eadyui-searchbox" style="width:300px;" data-options="menu:'#box',prompt:'請輸入關鍵字',searcher:qq">
</div>
<div id="box">
<div data-options="iconCls='icon-ok'">所有頻道</div>
<div>體育頻道</div>
</div>
</body>
</html>
2.JS調用加載 ：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="ss"></div>
<div id="box">
<div data-options="iconCls='icon-ok'">所有頻道</div>
<div>體育頻道</div>
</div>
</body>
</html>
$(function(){
$('#ss').searchbox({
menu:'#box',
searcher:function(name,value){
alert(name + '-' +value);
},
prompt:'請輸入關鍵字',
});
});
二、屬性列表：
| SearchBox屬性列表 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| width | number | 組件寬度，默認值爲auto。 |
| height | number | 組件高度，默認值爲22。 |
| prompt | string | 在輸入框中顯示提示信息。 |
| value | string | 輸入的值。 |
| menu | selector | 搜索類型菜單，每個菜單項都具備以下屬性：name：搜索類型名稱。selected：自定義默認選中的搜索類型名稱。默認值爲null。 |
| searcher | Fuction(value,name) | 在用戶按下搜索按鈕或回車鍵的時候調用searcher函數，默認值爲null。 |
| disable | boolean | 是否禁用搜索框。默認值爲false。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="ss"></div>
<div id="box">
<div data-options="iconCls='icon-ok'">所有頻道</div>
<div>體育頻道</div>
</div>
</body>
</html>
$(function(){
$('#ss').searchbox({
width:300,
height:22,
menu:'#box',
searcher:function(name,value){
alert(name + '-' +value);
},
prompt:'請輸入關鍵字',
value:'固定的值',
//disabled:true,
});
});
三、方法列表：
| SearchBox事件 | ||
| 事件名 | 傳參 | 說明 |
| 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 | 重置搜索框內容。 |
ps：我們可以使用$.fn.searchbox.defaults重寫默認值對象。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="ss"></div>
<div id="box">
<div data-options="iconCls='icon-ok'">所有頻道</div>
<div>體育頻道</div>
</div>
</body>
</html>
$(function(){
$('#ss').searchbox({
width:300,
height:22,
menu:'#box',
searcher:function(name,value){
alert(name + '-' +value);
},
prompt:'請輸入關鍵字',
value:'固定的值',
//disabled:true,
});
var m = $('#ss').searchbox('menu');
m.menu('setIcon',{
target:m.menu('findItem','體育頻道').target,
iconCls:'icon-save',
});
//console.log($('#ss').searchbox('textbox'));
//console.log($('#ss').searchbox('getValue'));
//$('#ss').searchbox('setValue',123);
//console.log($('#ss').searchbox('getName');
//$('#ss').searchbox('selectName','sports');
//$('#ss').searchbox('destory');
//$('#ss').searchbox('resize',500);
//$('#ss').searchbox('disable');
//$('#ss').searchbox('enable');
//$('#ss').searchbox('clear');
$(decument).dblclick(function(){
$('#ss').searchbox('reset');
});
});
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/1102974700
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載