中文网帮助文档: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 | 当值改变时触发。 代码实例:
|
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
resize | width | 调整组件尺寸。 代码实例:
|
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 是获取当前调用函数的本体
}
});