EasyUI中搜索框的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中搜索框的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
基本搜索框
流式搜索框
搜索框類別
實現
基本搜索框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>搜索框</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input> <script>//通過屬性searcher執行相應的方法，通過方法參數獲取搜索框的值//通過prompt屬性設置輸入框默認的提示值function doSearch(value){alert('You input: ' + value);} </script> </body> </html>流式搜索框
就是設置了寬度屬性為百分比之后，就會自動隨著瀏覽器窗口的大小的變化而變化。
<input class="easyui-searchbox" data-options="prompt:'Please Input Value'" style="width:30%">搜索框類別
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch2" style="width:300px"></input> <div id="mm"><div data-options="name:'all',iconCls:'icon-ok'">All News</div><div data-options="name:'sports'">Sports News</div> </div><script>function doSearch2(value,name){alert('You input: ' + value+'('+name+')');} </script>注：
1.通過data-options設置屬性。
2.通過prompt設置默認提示內容。
3.通過searcher綁定執行的方法。
4.通過menu設置一共的分類。
5.iconCls:'icon-ok'是對號圖標。
?
?
?
總結
以上是生活随笔為你收集整理的EasyUI中搜索框的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中放置Droppable的使
- 下一篇： MyBatisPlus中开启了逻辑删除则