JQuery EasyUI框架
1.?JQuery EasyUI框架概述
1.1.?JQuery EasyUI是什么東西
答：JQuery ?EasyUI就是一套基礎JQuery的富客戶端的UI框架。像這些將常用的控件封裝成一個UI庫的框架統稱富客戶端框架。
?
1.2.?JQuery EasyUI的作用是什么
答：既然EasyUI是一個UI框架，所以它的功能就是用于處理頁面的展示效果的。通常用于完成后臺管理系統的頁面排版。
?
現在市面有哪些常用富客戶端框架
答：EasyUI、LigerUI、ExtJS
?
1.3.?EasyUI的目錄說明
1.3.1.?下載路徑
EasyUI的官網地址為：http://www.jeasyui.com/?
1.3.2.?必須的基礎支持庫
標紅的文件夾是PC端使用EasyUI框架，必須導入的基礎庫文件。
?
| ? ? |
1.3.3.?目錄說明
demo：例示，非常重要，以后做開發，記不起來代碼，可以直接復制例示。
demo-moblie：手機端的例示，因為手機端已經有很多優秀UI框架，所以EasyUI在手機端基本沒有人用的（忽略）。
locale：編碼支持庫
plugins：沒有壓縮過的插件源碼
src：沒有壓縮過的核心源碼
themes：主題樣式，有個可以選擇
easyloader.js：源碼加載器
jquery.easyui.min.js：PC使用類庫。
jquery.easyui.moblie.js：手機端使用類庫
jquery.min.js：Jquery框架
?
1.4.?EasyUI入門示例
1.4.1.?開發步驟：
需求：使用EasyUI實現一個拖拉的層。
1.4.1.1.?第一步：導入EasyUI的庫文件
創建一個項目，將easyui的js的框架復制到項目里
?
?
1.4.1.2.?第二步：編寫代碼
編寫一個easyui-draggable.html文件
| <!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>入門例示</title> ??<!-- 導入easyui類庫 --> ??<!-- 導入樣式 --> ??<!-- 這個樣式，是easyui使用到的圖標 --> ??<link?rel="stylesheet"?href="../js/easyui/themes/icon.css"> ??<!-- 是easyui的控件樣式 --> ??<link?rel="stylesheet"?href="../js/easyui/themes/default/easyui.css"> ??<!-- 導入js?--> ??<!-- 因為easyui是基于jquery開發出來的，所以jquery一定要先加載 --> ??<script?type="text/javascript"?src="../js/easyui/jquery.min.js"></script> ??<script?type="text/javascript"?src="../js/easyui/locale/easyui-lang-zh_CN.js"></script> ??<script?type="text/javascript"?src="../js/easyui/jquery.easyui.min.js"></script> ??<script?type="text/javascript"> ????//$(function(){}); ????$(document).ready(function(){ ???? ???? //alert("-測試-"); ???? $("#cc").draggable({ ???? //值字符串類型，需要引號 ???? handle:'#title' ???? ???? }); ????}); ??</script> </head> <body> ???==HTML格式== ???<hr/> ?????<!-- ??????????????控件引用：easyui-控件名 ??????????????屬性的設置:data-options="屬性名:值" ?????? ??????--> ?????<div?class="easyui-draggable"?data-options="handle:'#title'"??style="width: 100px;height: 100px;border: 1px solid #ccc; "> ????????<!-- 拖動只能將頭，才能拖動。 --> ????????<div?id="title"?style="title</div> ?????</div> ???<br/> ???==javascript格式== ???<hr/> ???<div?id="cc"??style="width: 100px;height: 100px;border: 1px solid #ccc;"> ????????<!-- 拖動只能將頭，才能拖動。 --> ????????<div?id="title"?style="title</div> ???</div> </body> </html> |
?
1.5.?EasyUI的三大基礎概念
分別是：屬性，事件，方法
?
屬性指的是EsayUI框架控件（HTML）的屬性
事件指的是 EasyUI 框架控件可以觸發的事件（如：點擊事件、雙擊事件等）
方法指的是 EasyUI 框架控件，只有調用了默認執行的邏輯代碼塊。
?
?
1.5.1.?屬性設置
1.javascript方式設置：
格式：$(選擇器).組件名({屬性名:值});
注意事項
| $("#cc").draggable({ //值字符串類型，需要引號 ???? handle:'#title' }); |
2.HTML方式設置：
格式：data-options=”屬性名:值,屬性名：值”
| data-options="handle:'#title'" |
?
?
1.5.2.?事件觸發
JavaScript方式觸發:
格式：$(選擇器).組件名({事件名:function(參數列表){}});
| $("#cc").draggable({ //以后在easyui里看到e是一個事件參數 onDrag:function(e){ console.log('x:'+e.pageX+'y:'+e.pageY); } }); |
2.HTML方式觸發：
格式：data-options=”事件名:function(){}”
一般情況下不用
| ?<div?class="easyui-draggable"?data-options="handle:'#title',onDrag:function(e){console.log('x'+e.pageX+',Y:'+e.pageY);}"?style="width: 100px;height: 100px;border: 1px solid #ccc; ??????<div?id="title"?style="Title</div> ???</div> |
?
?
?
?
1.5.3.?方法調用
JavaScript方式調用:
無參數格式：$(選擇器).組件名(“方法名”);
| $("#cc").draggable("disable"); |
有參數的格式：$(選擇器).組件名(“方法名”,參數1,參數2....);
| $("#btn4").click(function(){ $('#pp').pagination("select",3); }); |
有返回的方法格式：
| //getValue獲取搜索值 $("#btn1").click(function(){ var?value=$('#ss').searchbox("getValue"); alert(value); }); |
?
--注意：方法調用沒有HTML調用的格式。
?
1.5.4.?注意事項
?
我們必須要理解屬性、事件、方法的使用方式，因為所有的EasyUI組件的就是千篇一律地使用上述的這三種概念的知識完成界面的構建以及事件的觸發。
?
問題：EsayUI有很多組件，那么屬性、事件、方法、去哪里找呢？
答：直接通過它的官方幫助文檔，也可以在代碼的src文件夾下查找
--通過官方 API（可以在網上找到中文版的）
| ? ? |
--通過src目錄與plugins目錄的文件代碼查看。
src目錄是EsayUI的基礎模塊代碼，plugins目錄存放的是基于基礎模塊擴展的控件的實現代碼
| ? ? |
?
?
1.5.5.?關于組件之間的依賴關系
通過官方的API文檔，我們發現有很多控件與控件之間是有依賴關系的。
如：SearchBox（搜索框）：依賴textbox與menubutton組件。
?
| ? ? |
?
所以，如果當屬性、事件、方法在當前控件找不到，可以去它的父控件上面去尋找。
?
2.?控件使用說明
本章的學習就是對EasyUI框架，提供的常用控件。包括了基礎控件、布局控件、菜單、按鈕、菜單、表單控件、窗口控件、表格控件、樹控件
?
學習難點：
?
2.1.?Base（基礎）
基礎控件全部控件如下：
| ? ? |
?
我們主要通過常用的來教學，如果對于本講義沒有提及的控件，可以在學習完后，可以通過官方提供的的Demo配置API 文檔了解。
2.1.1.?Draggable（拖動）
2.1.1.1.?HTML方式創建
class：通過class選擇器，指定框架名
data-options：通過EasyUI框架自定義的屬性data-options指定handle屬性
| <div?class="easyui-draggable"?data-options="handle:'#title'"?style="width:200px;height:150px;border:1px solid #ccc"> <div?id="title"?style="padding:5px;background:#ccc;color:#fff">Title</div> </div> |
2.1.1.2.?JavaScript方式創建
--HTM代碼
| <div?id="dd"?style="width:200px;height:150px;border:1px solid #ccc"> <div?id="title"?style="padding:5px;background:#ccc;color:#fff">Title</div> </div> |
--通過JavaScript創建控件
| $('#dd').draggable({ handle:'#title'? }); |
?
--注意：JavaScript與HTML綁定的ID必須要一一對應
handle屬性：開始拖動的句柄。就是只有按住Title這個DIV才可以拖動
?
2.1.1.3.?結果展示
| ? ? |
?
2.1.2.?Pagination（分頁）
2.1.2.1.?HTML方式創建
| <div?class="easyui-panel"> <div?class="easyui-pagination"?data-options="total:114"></div> </div> |
?
2.1.2.2.?JavaScript方式創建
--HTML聲明代碼
| <div?class="easyui-panel"> <div?id="pp"></div> </div> |
?
--Javscript代碼
| $('#pp').pagination({ total:114, pageSize:10 }); |
?
2.1.2.3.?結果展示
| ? ? |
?
?
2.1.3.?SearchBox（搜索框）
2.1.3.1.?HTML方式創建
| <div?class="easyui-panel"?style="width:100%;max-width:400px;padding:30px 60px;"> <input?class="easyui-searchbox"?data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch"?style="width:100%"> </div> <div?id="mm"> <div?data-options="name:'all',iconCls:'icon-ok'">All News</div> <div?data-options="name:'sports'">Sports News</div> </div> <script> function?doSearch(value,name){ alert('You input: '?+ value+'('+name+')'); } </script> |
2.1.3.2.?JavaScript方式創建
--HTML DIV代碼
| <div?class="easyui-panel"?style="width:100%;max-width:400px;padding:30px 60px;"> <input?id="ss"?style="width:100%"> </div> <div?id="mm"> <div?data-options="name:'all',iconCls:'icon-ok'">All News</div> <div?data-options="name:'sports'">Sports News</div> </div> <script> function?doSearch(value,name){ alert('You input: '?+ value+'('+name+')'); } </script> |
?
--JavaScript創建控件
| $('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'請輸入值' }); |
2.1.3.3.?結果展示
| ? |
?
2.1.4.?Tooltip（提示框）
2.1.4.1.?HTML方式創建
| ? |
?
2.1.4.2.?JavaScript方式創建
--HTML聲明
| ? |
--Javascript創建代碼
| ? |
?
2.1.4.3.?結果展示
| ? |
?
?
2.2.?Layout（布局）
2.2.1.?Panel（面板）
2.2.1.1.?HTML方式創建
| ? ? |
?
2.2.1.2.?JavaScript方式創建
| ? ? |
?
2.2.1.3.?結果展示
| ? ? |
?
?
2.2.2.?Tabs（選項卡）
2.2.2.1.?HTML方式創建
| ? ? |
2.2.2.2.?結果展示
| ? ? |
?
?
2.2.3.?Accordion（分類）
2.2.3.1.?HTML方式創建
| ? ? |
?
?
2.2.3.2.?結果展示
| ? ? |
?
?
2.2.4.?Layout（布局案例）
2.2.4.1.?HTML方式創建
| ? ? |
?
?
2.2.4.2.?結果展示
| ? ? |
?
?
?
?
?
2.6.3.?注意事項
1.因為一個組件有可能由多個依賴的組件。
??跟據組件依賴的不同部分，可以單獨通過ID去定位某一部對應的組件。
??如：包括有menu的組件，menu可以單獨使用。
?
表格DataGrid.數據格式
{total: 200 rows: [ ?
??{記錄}
]}
?
樹的數據格式：
{
??id:1
??txt:’內容’
??children:[
??]
}
?
id：節點ID，對加載遠程數據很重要。
text：顯示節點文本。
state：節點狀態，'open'?或 'closed'，默認：'open'。如果為'closed'的時候，將不自動展開該節點。
checked：表示該節點是否被選中。
attributes: 被添加到節點的自定義屬性。
children: 一個節點數組聲明了若干節點。
轉載于:https://www.cnblogs.com/aknife/p/11299983.html
總結
以上是生活随笔為你收集整理的JQuery EasyUI框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： easyui框架搭建
- 下一篇： 【Web学习笔记】easyui框架