JqueryEasyUI教程

第一章EasyUI中弹出框dialog的使用
为div标签加上class="easyui-dialog"即可使用
一、引入文件介绍
jquery.min.js：jquery核心文件，不再支持IE9以下文件；
jquery.easyui.min.js：easyui核心文件；
easyui-lang-zh_CN.js：EasyUI中文提示信息
easyui.css：EasyUI核心UI文件CSS
icon.css：EasyUI图标文件
二、Parser解析器，Parser解析器是专门解析渲染各种UI组件的
//关闭自动解析功能，界面组件不渲染，放在$(function() {})外
$.parser.auto = false;
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');
PS：使用指定 UI 解析，必须要设置父类容器才可以解析到。比如：
<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//回调函数，UI组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};

第二章Draggable(拖动)组件
为div标签加上class="easyui-draggable"即可使用
1.例子
html:
<div id="box" style="width:400px;height:200px;background:red">
内容部分
</div>
js:
$(function () {
$('#box').draggable({
revert:true
});
});
2.属性
使用方法：以键值对方式写在draggable({属性:值})里面
revert:默认值为false，设置true时，拖动停止时又回到原位置
如：
$('#box').draggable({
revert:true
});
3.事件
使用方法：以键值对方式写在draggable({属性:值})里面，值为一个方法,如：
onBeforeDrag: function (e) {
alert('拖动前触发'+e);//e为参数
}
4.方法
使用方法：写在draggable以外，即写在DOM加载里面
//禁止拖动
$('#box').draggable('disable');
//允许拖放
$('#box').draggable('enable');
//返回属性对象
var tt = $('#box').draggable('options');
PS：我们可以使用$.fn.draggable.defaults 重写默认值对象，写在draggable以外
$.fn.draggable.defaults.cursor = 'text';

第三章Resizable(调整大小)组件
为div标签加上class="easyui-resizable"即可使用
1.属性:以键值对方式写在resizable({属性:值})里面
js写法：
$('#box').resizable({
maxWidth:200,
maxHeight:200
});
2.事件：
使用方法：以键值对方式写在resizable({属性:值})里面，值为一个方法,如：
onStartResize: function (e) {
alert('开始改变大小时！');
}
3.方法
使用方法：写在resizable以外，即写在DOM加载里面
//返回属性对象
console.log($('#box').resizable('options'));
//禁止调整
$('#box').resizable('disable');
//启用放置
$('#box').resizable('enable');
PS：我们可以使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;

第四章ProgressBar(进度条)组件
为div标签加上class="easyui-progressbar"即可使用
<div id="box" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
1.属性:以键值对方式写在progressbar({属性:值})里面
$('#box').progressbar({
value: 70,
width:300
});
2.事件：以键值对方式写在progressbar({属性:值})里面
动画示例：
onChange newValue,oldValue //在值更改的时候触发
$('#box').progressbar({
value: 30,
width: 300,
onChange: function (newValue,oldValue) {
console.log('新:'+newValue+',旧:'+oldValue);
}
});
setInterval(function () {
$('#box').progressbar('setValue',
$('#box').progressbar('getValue') + 10);
}, 200);

//设置新值
setTimeout(function () {
$('#box').progressbar('setValue',70);
}, 1000);

第五章Panel(面板)组件
为div标签加上class="easyui-panel"和data-options="closable:true"即可使用,如:
<div id="box" class="easyui-panel" data-options="closable:true" title="我的面板" style="width:500px;">
<p>内容区域</p>
</div>
js使用方法：
$('#box').panel({
width: 500,
height:300,
closable: true,
title:'面板',
iconCls:'icon-search' //图标
});

第六章Tabs(选项卡)组件，此组件依赖于panel和LinkButton组件
为div标签加上class="easyui-tabs"即可使用,如：
<div id="box" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1">
tab1
</div>
<div title="Tab2" data-options="closable:true">
tab2
</div>
<div title="Tab3"
data-options="iconCls:'icon-reload',closable:true">
tab3
</div>
</div>
js加载方式：
1.属性
$('#box').tabs({
fit:true
});
2.事件和方法类似上面