EasyUI基础searchbox&progressbar(搜索框，进度条)

时间：2015-07-30 18:36:20 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：

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="width:300px" data-options="menu:‘#mm‘" /> <div id="mm" style="width: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> 显示第一个selected定义为true的搜索类别。	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="width:300px"  
        data-options="searcher:doSearch,prompt:'Please Input Value',menu:'#mm'"></input>  
           
<div id="mm" style="width: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="width: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="width:400px;"></div>

2、使用js脚本创建:

<div id="p" style="width: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="width: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>

执行情况见例如以下截图: