（一）EasyUI 使用——基本概念

1. EasyUI是什麼

EasyUI是一種第三方組織開發的一款基於jQuery的，簡單易用的，功能強大的WEB[後臺前端]JavaScript現成的組件庫。

2.  JavaScript，AJAX，JSON，jQuery，EasyUI分別能解決什麼問題

    JS：基於瀏覽器對web頁面中的節點進行操做，比較麻煩

    jQuery：基於瀏覽器簡化對web頁面中的節點進行操做，作到了write less do more

    AJAX：基於瀏覽器與服務端進行局部刷新的異步通信編程模式

    JSON：簡化自定義對象的建立與AJAX數據交換輕量級文本

    EasyUI：快速基於現成的組件建立自已的web頁面

   組件：是指已經由第三方開源組織寫好的，直接可使用的功能界面，例如：form，layout，tree...     

   注意：咱們學的都是零散的組件，項目中須要將其裝配起來，方可構建完整的web頁面，EasyUI只是衆多前端WEB組件之一。

3. EasyUI入門（基本步驟）

  3.1 下載程序庫並導入EasyUI的CSS和Javascript文件到您的頁面。

<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-1.7.2.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

   3.2  一旦你導入了EasyUI必須的文件，你就能夠經過標記或Javascript定義一個EasyUI組件。例如：定義一個帶可摺疊和放大功能的面板，你須要寫的HTML代碼以下：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true,maximizable:true">   
    The panel content    
</div>  

  3.3  效果以下

    能夠看到，EasyUI很是方便易用，使用中要注意：①想要使用什麼樣的組件，就要在div中用【 class="easyui-xxx" 】聲明出來，例如 ：要實現面板樣式，須要添加 class="easyui-panel" ②組件內的效果可用 【 data-options=「屬性名：屬性值，···，屬性名：屬性值」 】屬性來實現，例如：要顯示保存圖標且實現面板摺疊功能，可在div中添加 data-options="iconCls:'icon-save',collapsible:true"

總結以下：

 

<!--
第一：寫一個普通div標籤
第二：提倡爲div標籤取一個id屬性，未來用jquery好定位
第三：爲普通div標籤添加easyui組件的樣式
全部的easyui組件的樣式均按以下格式設置：
easyui-組件名
第四：若是要用easyui組件自身的屬性時，必須在普通標籤上書寫data-options屬性名,
內容爲，key:value,key:value,若是value是string類型加引號，外面雙引號，
則裏面單引號    
注意：要在普通標籤中書寫data-options屬性的前提是：在普通標籤上加class="easyui-組件名" 
屬性值大小寫都可
-->

 

 

 4.  EasyUI組件(plugins)

 重中之重，其實EasyUI頁面效果的實現就是由它衆多的組件來完成，對於這些組件我的感受時間不夠的話沒有必要每一個組件的屬性所有了解，固然他們的用法須要熟練。使用時遇到須要的功能能夠直接查手冊。

調用方法的語法：$('selector').plugin('method', parameter);
　　解釋：
  selector 是jQuery對象選擇器。
  plugin 是插件的名稱。
  method 是相應插件現有的方法。
  parameter 是參數對象，能夠是一個對象、字符串等。

下面介紹幾種經常使用的EasyUI組件用法——>

（二）EasyUI 使用
http://www.cnblogs.com/zjfjava/p/6837196.html