Jquery EasyUI的Resizable、Searchbox 和Progressbar插件

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

 

一、EasyUI Resizable 可调整尺寸    属性 名称类型描述默认值disabledboolean如果设置为 true，则禁止调整尺寸。falsehandlesstring指可调整尺寸（resizable）的方向，'n' 是北，'e' 是东，等等。n, e, s, w, ne, se, sw, nw, allminWidthnumber调整尺寸时最小宽度。10minHeightnumber调整尺寸时最小高度。10maxWidthnumber调整尺寸时最大宽度。10000maxHeightnumber调整尺寸时最大高度。10000edgenumber被调整尺寸的边框的边缘。5

 事件  方法 见文档

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

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

	
	

--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. 普通搜索框

	

		
	
	

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

--index.js--

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

});

  

2. 带分类的搜索框

	

		
		

			
衣服
			
电脑
		
	
	

--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）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

属性 名称类型描述默认值widthstring设置进度条（progressbar）的宽度。autoheightnumber组件的高度。该属性自版本 1.3.2 起可用。22valuenumber百分比值。0textstring显示在组件上的文本模板。{value}% 事件 名称参数描述onChangenewValue,oldValue当值改变时触发。 代码实例：

1. $('#p').progressbar({
2. onChange: function(value){
3. alert(value)
4. }
5. });

方法 名称参数描述optionsnone返回选项（options）对象。resizewidth调整组件尺寸。 代码实例：

1. $('#p').progressbar('resize'); // 调整进度条为初始宽度
2. $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度

getValuenone返回当前的进度值。setValuevalue设置一个新的进度值。

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

1、流式进度条

	
	
		进度条：

	
	
	开始进度

--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 是获取当前调用函数的本体
	}
});