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;