EasyUI中搜索框的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中搜索框的简单使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場景
基本搜索框
流式搜索框
搜索框類別
實(shí)現(xiàn)
基本搜索框
<!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執(zhí)行相應(yīng)的方法，通過方法參數(shù)獲取搜索框的值//通過prompt屬性設(shè)置輸入框默認(rèn)的提示值function doSearch(value){alert('You input: ' + value);} </script> </body> </html>流式搜索框
就是設(shè)置了寬度屬性為百分比之后，就會自動(dòng)隨著瀏覽器窗口的大小的變化而變化。
<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設(shè)置屬性。
2.通過prompt設(shè)置默認(rèn)提示內(nèi)容。
3.通過searcher綁定執(zhí)行的方法。
4.通過menu設(shè)置一共的分類。
5.iconCls:'icon-ok'是對號圖標(biāo)。
?
?
?
總結(jié)
以上是生活随笔為你收集整理的EasyUI中搜索框的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中放置Droppable的使
- 下一篇： MyBatisPlus中开启了逻辑删除则