(一)EasyUI 使用——基本概念


1. EasyUI是什么

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

2.  JavaScriptAJAXJSONjQueryEasyUI分別能解決什么問題

    JS:基於瀏覽器對web頁面中的節點進行操作,比較麻煩

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

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

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

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

   組件:是指已經由第三方開源組織寫好的,直接可以使用的功能界面,例如:formlayouttree...     

   注意:我們學的都是零散的組件,項目中需要將其裝配起來,方可構建完整的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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM