Jquery Easyui搜索框組件SearchBox使用詳解(19)
更新時間:2016年12月17日 16:56:55 作者:Jsakura
這篇文章主要為大家詳細介紹了Jquery Easyui搜索框組件SearchBox的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Jquery Easyui搜索框組件的實現(xiàn)代碼,供大家參考,具體內(nèi)容如下
加載方式
Class加載
<input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="box" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">所有新聞</div> <div data-options="name:'sports'">鳀魚新聞</div> </div>
JS調用加載
<input id="ss" /> </input> <div id="box" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div> <script> $(function () { $('#ss').searchbox({ // 組件寬度 width : 500, // 組件高度 height: 30, // 輸入的值 value : 'spord', // 在用戶按下搜索按鈕或回車鍵的時候調用 searcher 函數(shù) searcher : function (value, name) { alert(value + ',' + name); }, // 搜索類型菜單 menu : '#box', // 在輸入框中顯示提示消息。 prompt : '請輸入內(nèi)容', // 是否禁用搜索框 disabled: false }); }); </script>
屬性列表
方法列表
//返回屬性對象 console.log($('#ss').searchbox('options')); //返回文本框對象 console.log($('#ss').searchbox('textbox')); //返回當前索引值 console.log($('#ss').searchbox('getValue')); //改變當前索引值 $('#ss').searchbox('setValue','改變值') //選擇指定的搜索類型 $('#ss').searchbox('selectName', 'sports'); //返回當前索引類型值 console.log($('#ss').searchbox('getName')); //重置搜索框寬度 $('#ss').searchbox('resize', 200); //銷毀搜索框 $('#ss').searchbox('destroy'); //禁用和啟用 $('#ss').searchbox('disable'); $('#ss').searchbox('enable'); //清理搜索框內(nèi)容 $('#ss').searchbox('clear'); //重置搜索框內(nèi)容 $(document).dblclick(function () { $('#ss').searchbox('reset'); }); //返回類型名對象 var m = $('#ss').searchbox('menu'); var item = m.menu('findItem', '體育'); m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); //可以使用$.fn.searchbox.defaults 重寫默認值對象。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能,需要的朋友可以參考下。2011-10-10JQueryiframe頁面操作父頁面中的元素與方法(實例講解)
這篇文章主要是對JQueryiframe頁面操作父頁面中的元素與方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jQuery實現(xiàn)的回車觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實現(xiàn)的回車觸發(fā)按鈕事件功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-03-03jsonp跨域請求數(shù)據(jù)實現(xiàn)手機號碼查詢實例分析
這篇文章主要介紹了jsonp跨域請求數(shù)據(jù)實現(xiàn)手機號碼查詢的方法,結合實例形式較為詳細的分析了jsonp跨域請求數(shù)據(jù)的原理與查詢號碼的應用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12