要想使用easyui，第一件事情是在項目中添加easyui的組件（css、js等）
先下載：
http://www.jeasyui.com/index.php
下載地址：
http://www.jeasyui.com/download/downloads/jquery-easyui-1.5.3.zip
可選擇版本的頁面：
http://www.jeasyui.com/download/list.php
需要使用的包和js文件：
locale：包括了地區和語言
plugins：包含了easyui的所有組件
themes：包含了easyui的圖標和界面風格
jquery.min.js：jquery的js文件，由於easyui是基於jquery的，所以一定要有。
jquery.easyui.min.js：easyui的初始化js庫
http://www.oschina.net/
如何在頁面中使用？
需要導入兩個js兩個css
|
<link href="easyui/themes/default/easyui.css" type="text/css" rel="stylesheet" /> <link href="easyui/themes/icon.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> |
3.1.1 Panel : 登錄頁面正中間藍色面板
面板作爲承載其它內容的容器。這是構建其他組件的基礎（比如：layout,tabs,accordion等）。它還提供了摺疊、關閉、最大化、最小化和自定義行爲。面板可以很容易地嵌入到web頁面的任何位置。
3.1.2 form : 使用EasyUI的form組件實現表單數據提交,同時需要添加客戶端非空驗證
使用easyui的方式三種：
如何設置屬性
如何調用easyui組件的方法
如何綁定easyui組件的事件處理函數
3.1.3 linkedbutton: 登錄頁面的”登錄”按鈕和”重置”按鈕
3.1.4 messager: 當用戶登錄成功後彈出提示框,點擊確認跳轉到主頁面
3.1.5 validatebox: 輸入框使用EasyUI驗證框
3.2 主頁面:主頁面使用layout進行佈局,採用1:2:1頁面佈局,使用如下組件
layout佈局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。
|
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div> <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:'center',title:'Center'"></div> </body> |
3.2.1 頂部:簡單添加一句話即可
3.2.2 中間:
3.2.2.1 中間-左側:tree使用樹狀菜單顯示數據,點擊菜單項,在右側tabs中添加一項
3.2.2.2 中間-右側:整個右側放置一個tabs,點擊tree時在tabs中添加一項
3.2.3 自己設定需求,當右側tabs中出現一項後,裏面包含
3.2.3.1 datagrid : 數據表格,要求有分頁.
3.2.3.2 在datagrid上方添加工具欄,工具欄中有”修改”按鈕和”刪除”按鈕
3.2.3.3 點擊”刪除”彈出消息窗口的確認框($.messager.confirm),用戶點擊確認刪除選中數據.
3.2.3.4 用戶點擊”修改”彈出dialog窗口,並傳遞數據.傳遞數據後修改功能可以不完成.
