easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar、tooltip该,有一点兴奋。本文将偏向searchbox和pargressbar做一个探讨。鉴于双方的内容不会太多,在这里，直接此事合并!
searchbox
不用过多解释,仅仅要用于用户对数据的搜索。使用$.fn.searchbox.defaults重载默认值。
依赖组件:菜单button。
searchbox提示用户输入搜索值。它能够设定一个类别菜单,同意用户选择不同的搜索类别。当用户点击确认button时将运行搜索动作。
属性
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| width | number | 控件的宽度 | auto |
| height | number | 控件的高度,1.3.2 | 22 |
| prompt | string | 搜索框内容提示信息 | '' |
| value | string | 用户输入的值 | '' |
| menu | selector |
搜索类型菜单。每一个菜单项能够有下面属性: name：搜索类型的名称。 selected:当前选择的搜索类型的名称 以下样例显示了怎样定义一个选定的搜索类型名称。
<input class="easyui-searchbox" style="300px" data-options="menu:'#mm'" /> <div id="mm" style="150px"> <div data-options="name:'item1'">Search Item1</div> <div data-options="name:'item2',selected:true">Search Item2</div> <div data-options="name:'item3'">Search Item3</div> </div>
|
null |
| searcher | function(name,value) | 当用户点击搜索button或者按下ENTER见得时候搜索函数将被调用。 | null |
| disable | boolean | 定义搜索框是否可以被使用。1.3.6,默认是能使用的。 | false |
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回參数对象 |
| menu | none |
返回搜索类型菜单对象。以下的样例显示了怎样改动菜单项图标。
var m = $('#ss').searchbox('menu'); // get the menu object var item = m.menu('findItem', 'Sports News'); // find the menu item // change the menu item icon m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); // select the searching type name $('#ss').searchbox('selectName', 'sports');
|
|
textbox |
none | 返回文本框对象。 |
| getValue | none | 返回当前搜索keyword。 |
| setValue | value | 设置新的搜索keyword。 |
| getName | none | 返回当前搜索类型。 |
| selectName | name |
选择当前的搜索类型名称。
演示样例:
$('#ss').searchbox('selectName', 'sports');
|
| destroy | none | 清楚搜索框组件 |
| resize | width | 又一次设置搜索框宽度。 |
| disable | none | 禁用搜索框。 1.3.6 |
| enable | none | 启用搜索框。1.3.6 |
| clear | none | 清空搜索框中的value。1.3.6 |
| reset | none | 重置搜索框的值。 1.3.6 |
使用方式
1、使用标签创建。对input标签引用'easyui-searchbox'类。
<script type="text/javascript">
//当用户点击搜索时运行的函数
function doSearch(value,name){
alert(value+":"+name)
}
</script>
<input id="ss" class="easyui-searchbox" style="300px"
data-options="searcher:doSearch,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div> 2、使用js脚本创建:
<input id="ss"></input>
<div id="mm" style="120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$('#ss').searchbox({
searcher:functionvalue,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'Please Input Value'
}); 对于searchbox的学习就到这儿了,searchbox使用起来还是较为简单的。官网的样例也就是上述的创建方式,这里就不再赘述了。
progressbar
进度条能够提供反馈一个长时间执行的操作的显示进展。
这个进程能够更新,能够让用户知道当前操作执行的进度,提高用户体验。
使用$.fn.progressbar.defaults重载默认值。
属性
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| width | string | 设置进度条的宽度 | auto |
| height | number | 设置进度条的高度.1.3.2 | 22 |
| value | number | 设置进度条的值 | 0 |
| text | string | 今天条上显示的文本 | {value}% |
事件
| 名称 | 參数 | 描写叙述信息 |
| onChange | newValue,oldValue |
当进度条的值改变的时候触发 样例:
$('#p').progressbar({ onChange: function(value){ alert(value) } });
|
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回參数对象 |
| resize | width |
改变组件的大小:
$('#p').progressbar('resize'); // 不改变大小 $('#p').progressbar('resize', 350); // 改变大小
|
| getValue | none | 得到进度条的值 |
| setValue | value | 设置进度条的值 |
使用方式
1、使用标记创建
<div id="p" class="easyui-progressbar" data-options="value:60" style="400px;"></div>
2、使用js脚本创建:
<div id="p" style="400px;"></div>
$('#p').progressbar({
value: 60
});
Demo
对于进度条的使用demo,这里參照官网的样例,模拟下文件上传的效果。
代码例如以下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条演示</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript">
function start() {
var value = $('#p').progressbar('getValue');
if (value < 100) {
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
if (value >= 100) {
$('#button').linkbutton('disable');//文件上传成功之后禁用按钮
$('#p').progressbar('disable');//文件上传成功之后禁用进度条
}
}
}
</script>
<div id="p" class="easyui-progressbar" data-options="value:0" style="400px;"></div>
</br>
<a onclick="start()" id="button" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-refresh'">文件上传</a>
<script>
$('#p').progressbar({
text: '文件上传{value}%',
});
</script>
</body>
</html>执行情况见例如以下截图:
OK!演示就到这里了.over
版权声明：本文博客原创文章，博客，未经同意，不得转载。