EasyUI系列学习(二)-使用EasyUI

一、引入必要文件

<!--1.0引入jQuery核心库-->
<script src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!--2.0引入jQuery EasyUI核心库-->
<script src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!--3.0引入EasyUI中文提示信息-->
<script src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<!--4.0引入EasyUI核心UI文件CSS-->
<link href="jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
<!--5.0引入EasyUI图标文件-->
<link href="jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />

二、加载EasyUI组件方式

1.方式一：使用class方式加载

<div class="easyui-dialog" title="class赋值加载" style="width:400px;height:200px;"></div>

2.方式二：使用js调用加载（推荐）

<div id="box" title="JS加载" style="width: 200px;height:100px;left:100px;"></div>
<script>
$(function() {
$("#box").dialog();
})
</script>

3.方式三：使用easyload.js智能加载（按需加载）

<script src="../Scripts/jquery-easyui-1.4.4/jquery.min.js"></script>
<script src="../Scripts/jquery-easyui-1.4.4/easyloader.js"></script>
<script>
//要用到哪个组件，给哪个对象添加属性
easyloader.load("dialog",function() {
$("#box").dialog();
})
</script>
<div id="box" title="JS加载" style="width: 200px;height:100px;left:100px;"></div>

三、parser解析器（UI渲染解析器）

1.取消自动渲染

<div id="box" class="easyui-dialog" title="JS加载" style="width: 200px;height:100px;left:100px;">内容</div>
<script>
//放$(function(){}外),取消自动渲染
$.parser.auto = false;
$(function () {

});
</script>

2.解析所有UI组件

<div id="box" class="easyui-dialog" title="JS加载" style="width: 200px;height:100px;left:100px;">内容</div>
<script>
$.parser.auto = false;
$(function () {
$.parser.parse();
});
</script>

3.解析制定UI组件

<div id="box">
<div class="easyui-dialog" title="JS加载" style="width: 200px;height:100px;left:100px;">
内容
</div>
</div>
<script>
$.parser.auto = false;
$(function () {
//必须设置父类容器，才可解析
$.parser.parse("#box");
});
</script>

4.UI解析完毕后事件

<div id="box">
<div class="easyui-dialog" title="JS加载" style="width: 200px;height:100px;left:100px;">
内容
</div>
</div>
<script>
$.parser.auto = false;
$(function () {
//如果注释掉就没有弹窗
$.parser.parse("#box");
});
//UI解析完毕后，弹窗
$.parser.onComplete = function () {
alert("UI解析完毕");
}
</script>

四、设置属性

1.方式一：通过标签属性设置

<div class="easyui-resizable" data-options="maxWidth:400,maxHeight:200" style="height: 100px; background:cyan"></div>

2.方式二：通过js(推荐)

<div id="box" style="height: 100px; background:cyan"></div>
<script>
$(function() {
$("#box").resizable({
maxWidth: 400,
maxHeight: 200
});
})
</script>

五、设置默认值

所有的组件都可以设置全局默认值

$.fn.panel.defaults.height = 150;