Jquery EasyUI的Resizable、Searchbox 和Progressbar插件

中文网帮助文档：http://www.jeasyui.net/plugins/154.html

 

一、EasyUI Resizable 可调整尺寸   

属性

名称	类型	描述	默认值
disabled	boolean	如果设置为 true，则禁止调整尺寸。	false
handles	string	指可调整尺寸（resizable）的方向，'n' 是北，'e' 是东，等等。	n, e, s, w, ne, se, sw, nw, all
minWidth	number	调整尺寸时最小宽度。	10
minHeight	number	调整尺寸时最小高度。	10
maxWidth	number	调整尺寸时最大宽度。	10000
maxHeight	number	调整尺寸时最大高度。	10000
edge	number	被调整尺寸的边框的边缘。	5

 事件  方法 见文档

    使用 javascript 创建可调整尺寸（resizable）对象。

1. 基础可调整div大小：$("#rr").resizable()

	<div id="rr"></div>	

--index.css--
@charset "UTF-8";
#rr {
	margin: 10px;
	width: 300px;
	height: 200px;
	border: 1px solid #ff0000;
	background: #808040;
}

--index.js--

$(function(){	
	$("#rr").resizable({
		maxWidth: 500,
	});

});

 

​

二、EasyUI Searchbox 搜索框

搜索框（searchbox）提示用户输入搜索值。它可以结合一个菜单，允许用户选择不同的搜索类别。当用户按下 ENTER 键时或者点击组件右侧的搜索按钮时，搜索动作将被执行。

中文网帮助文档：http://www.jeasyui.net/plugins/156.html

1. 普通搜索框

	<div>
		<input type="text" id="ss" />
	</div>	

--index.css--
@charset "UTF-8";
#ss {
	width: 300px;
}

--index.js--

$(function(){	
	$("#ss").searchbox({
		searcher: function(value){ //参数为搜索文本框的内容
			//根据value使用ajax访问后台
			alert(value);
		}
	});

});

  

2. 带分类的搜索框

	<div>
		<input type="text" id="ss" />
		<div id="category">
			<div name="clothes" iconCls="icon-ok">衣服</div>
			<div name="computer" iconCls="icon-ok">电脑</div>
		</div>
	</div>	

--index.css--
@charset "UTF-8";
#ss {
	width: 300px;
}

--index.js--
$(function(){	
	$("#ss").searchbox({
		menu: "#category",
		searcher: function(value, name){ //value:为搜索文本框的内容，name: 为分类的name值
			alert(value +", name="+ name);
		}
	});

});

      

 

三、EasyUI Progressbar 进度条

进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

属性

名称	类型	描述	默认值
width	string	设置进度条（progressbar）的宽度。	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	返回选项（options）对象。
resize	width	调整组件尺寸。 代码实例：   $('#p').progressbar('resize'); // 调整进度条为初始宽度 $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度
getValue	none	返回当前的进度值。
setValue	value	设置一个新的进度值。

使用 javascript 创建进度条（ProgressBar）。

1、流式进度条

	<div id="q"></div>	
		进度条：<div id="bar" style="width:300px;">
	</div>	
	<a id="start" href="javascript:void(0)">开始进度</a>

--index.css--

--index.js--
$(function(){	
	$("#bar").progressbar({
		value: 0
	});
});

$("#start").on("click",function add(){
	var value = $('#bar').progressbar('getValue');
	if (value < 100){
		value += Math.floor(Math.random() * 10);
		$('#bar').progressbar('setValue', value);
		setTimeout(arguments.callee, 200);//arguments.callee 是获取当前调用函数的本体
	}
});