场景
基本搜索框
流式搜索框
搜索框类别
实现
基本搜索框
<!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'是对号图标。
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
