EasyUI的下載與使用

http://www.jeasyui.com/download/index.php

下載之後，咱們會獲得一個壓縮包，解壓之後，目錄結構是這樣的： 

---

解壓包中各個目錄的說明

1. demo 
demo目錄是EasyUI各個組件的演示例子。

2. demo- mobile 
這個目錄是EasyUI各個組件在移動端開發的演示例子。 

3. locale 
這個目錄是EasyUI對於各個國家的語言包。

如圖所示，其中 
簡體中文的語言包是easyui-lang-zh_CN.js， 
繁體中文的語言包是：easyui-lang-zh_TW.js， 
英語的語言包（默認）：easyui-lang-en.js， 
其餘的語言包就不說了（我也不知道^_^）。

4. plugins 
此目錄的EasyUI使用的插件js代碼

5. src 
此目錄是部分EasyUI插件的js源碼。 

6. themes 
此目錄是EasyUI主題文件。

7. 根目錄 
根目錄下的文件有：

文件	說明
changlog.txt	EasyUI版本更新說明。
easyloader.js	EasyUI的模塊加載器，用來自動幫助自動加載EasyUI文件。
jquery.easyui.min.js	所有easyui核心和插件的集合文件，通常能夠直接加載這個文件而不用一個個加載那些插件。
jquery.easyui.mobile. min.js	同上，不一樣的是適用於移動端的。
jquery.min.js	jQuery庫文件，由於EasyUI是基於jQuery的，因此也得加載jQuery文件。
license_freeware.txt	無償使用EasyUI的聲明（只能用於非盈利目的）。
readme.txt	商業用途許可說明。

---

加載EasyUI

一般狀況下，咱們只須要加載幾個文件就夠了：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

• 1
• 2
• 3
• 4

第一個和第二個是主題的css樣式文件，上面的代碼是使用默認主題，咱們也很容易切換到其餘主題，只要修改defult便可。 
第三個是jQuery庫文件，通常使用EasyUI解壓包裏面的jQuery文件便可。 
第四個是EasyUI核心和組件的集合js文件，加載這個文件會加載全部的EasyUI組件，就不須要一個個導入組件的js文件了。咱們也可使用EasyUI的EasyLoader插件，這個插件能夠幫助咱們自定義加載EasyUI模塊。

使用EasyUI的組件的方法

通常有兩種方式來使用EasyUI組件。

第一種是經過在html元素直接設置class爲EasyUI組件預約義的名稱便可，EasyUI就會自動在頁面加載時爲元素渲染樣式。

例子：咱們來建立一個面板（panel）：

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="個人面板" data-options="iconCls:'icon-ok',collapsible:true"> 個人CSDN博客地址爲： <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a> </div>

• 1
• 2
• 3
• 4
• 5

效果圖： 

第二種是經過js代碼來使用EasyUI組件。使用方法：

$('selector').plugin(); 

• 1

即先經過jQuery選定要渲染的元素，而後調用相應的組件便可，這裏的plugin是組件的名字。

例子：用js使用EasyUI的面板組件： 
首先是html：

<div id="my-panel" style="padding:10px;"> 個人CSDN博客地址爲： <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a> </div>

• 1
• 2
• 3
• 4

js代碼：

$('#my-panel').panel({ width: 500, height: 150, title: '個人面板', collapsible:true, });

• 1
• 2
• 3
• 4
• 5
• 6

效果圖：