痞客興的部落格

當你將EasyUI的檔案放到WEB的root後 http://charleslin74.pixnet.net/blog/post/456534926

並且在檔頭加入了必要的js及css載入 http://charleslin74.pixnet.net/blog/post/456544466-%5beasyui%5d-easyui%E4%BD%BF%E7%94%A8%E6%99%82%E4%B8%BB%E8%A6%81%E8%BC%89%E5%85%A5%E6%AA%94%E6%A1%88--js-css

這時你就能在網頁內容裡來加入EasyUI的功能模組了,而加入功能模組的方法有二

第一種是使用class的方法來達到

當你在html裡使用class標籤,class名使用 "easyui-xxxx" 這種格式,前面以easyui為開頭,後面是功能模組名,中間加上"-"

這樣EasyUI就會認得並解析它

<div class="easyui-dialog" style="width:400px;height:200px"
            data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
                dialog content.
</div>

例如上例中的 class="easyui-dialog"

第二種是在js裡面去呼叫及操作,例如我們在html裡有個div,而它的id是box

<div id="box" style="width:400px;height:200px"
            title="My Dialog">
                dialog content.
</div>

到這裡還是一般的html,沒有EasyUI的出現,而我們將EasyUI寫在js/index.js裡,內容如下

$(function(){
    $('#box').dialog();
});

上例中,#box就是指id是box的區塊,dialog()就是EasyUI的對話功能模組,這樣就能區動EasyUI的運作了.

而EasyUI另外還有一種智能載入的方法,它是由程式設定要載入的功能,EasyUI會自動載入該功能及其相依功能

所以比全載的檔案較小,網路流量也較小,對流量很計較的情形可以考慮使用,做法如下

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_TW.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

只留下橘色的,並加上黃色的easyloader.js

在index.js要改變EasyUI的呼叫方法,使用easyloader.load()來達成

$(function(){
    easyloader.load('dialog', function(){
            $('#box').dialog();
    });
});

本文參考李炎恢EasyUI視頻實作,記錄步驟備忘.