easyui（基础布局）
一.easyUI的簡介
? ? easyui是一款基于jQuery的前端框架，可以使用其中的組件進行布局以及用來做后臺的管理界面。
? ? EasyUI是一個前端開發的框架，其將常用的頁面開發使用的組件進行了封裝，前端開發人員只需將EasyUI的資源導入項目后使用即可，快速提升開發效率。
? ? 使用：
?? ?① 導入EasyUI的資源
?? ?② 查閱API文檔使用EasyUI的組件完成頁面開發
二.easyUI的不足之處
? ? 現在據了解到有三種UI框架，分別是easyUI、bootstrap、layUI這三種。
? ? 不足之處： 從效果來看easyui的界面效果要遠遠差于bootstrap，跟layui比，界面效果也更差
三.學easyUI的好處
? ? 雖然說它的效果界面并不是那么好看，但是它也有它的好處，而且easyUI要簡單學些，如果學會的easyUI框架，那么上手layUI就會輕松許多。
? ? 好處：
?? ?1.從金錢的角度上，開發首先會排除掉bootstrap。
?? ?2.從學習文檔的完整性、前端框架的穩定性，組件的豐富性考慮，easyui都要優于layui。
?? ?3.從公司的角度考慮選用那個框架成本、公司的后端技術人員前端功底、前端的社區活躍度。
? ? 注意：
?? ?使用EasyUI，其實就是在使用別人已經封裝好的代碼來完成自己的頁面開發。
?? ?所以必須按照EasyUI的文檔說明來使用。所以我們學習EasyUI，其實就是在
?? ?學習如何按照EasyUI的文檔來使用其組件并且其常用組件有哪些。
四.easyUI的特點
? ? easyUI是一種基于jQuery的用戶界面插件集合.
? ? easyUI為創建現代化，互動，JavaScript應用程序，提供必要的功能。
? ? 使用easyUI你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
? ? easyUI是個完美支持HTML5網頁的完整框架。
? ? easyUI節省了開發產品的時間和規模。
? ? easyUI非常簡單，但是功能非常強大
五、EasyUI的常用組件
frameset
① 基礎組件：常用的比較小的功能組件，不是每個網頁中都會用到
② 布局組件: 很重要，每個網頁都會使用，完成網頁的布局的。
③ 菜單與按鈕組件:很重要，每個網頁都會使用，在網頁中完成菜單和按鈕的效果
④ 表單組件:很重要，搜集用戶數據，封裝了常用的數據校驗，并支持自定義校驗
⑤ 窗口組件:在當前頁面中顯示子窗口效果，對頁面中的功能進行完善。
⑥ 數據網格和樹組件:很重要，非常之重要。在網頁中顯示表格以及樹狀數據+++++++++++++++++++
jQuery EasyUI簡介：封裝大量的jQuery插件(簡化ajax，jquery，css樣式，布局)
學習目標：
?
學習內容：
插件實現: ① HTML標簽+插件的class樣式。<a href="#" class="easyui-linkbutton">我是講文明</a> ② HTML標簽+基于編程的插件實現<a href='#' id="btn">我是ZKING ZZ</a>js代碼： $("#btn").linkbutton(); ? 插件內容： 屬性：設置插件的樣式。圖標，寬度，高度。 事件：單擊事件，雙擊 方法：修改插件屬性，狀態。學習方法：
1. 掌握easyui插件開發模板[記住] 2. 通過文檔配合，學習他的屬性 事件 方法。[查看文檔]day_01 EasyUI （入門）
1.jQuery EasyUI框架概述
1.1 什么是jQuery EasyUI?
JQuery EasyUI就是一套基礎JQuery的富客戶端的UI框架(簡化ajax，jquery，css樣式，布局)。像這些將常用的控件封裝成一個UI庫的框架統稱富客戶端框架
1.2 jQuery Easy的作用
既然EasyUI是一個UI框架，所以它的功能就是用于處理頁面的展示效果的。通常用于完成后臺管理系統的頁面排版。
現在市面有哪些常用富客戶端框架：EasyUI、LigerUI、ExtJS
1.3 EasyUI的目錄說明
1.3.1 下載路徑
EasyUI的官網地址為：EasyUI - helps you build your web pages easily
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框架
2.WEB項目搭建EasyUI環境
搭建環境的步驟如下：
1. 導入需要的css樣式文件。easyui.css ? icon.css ? 2. 導入相關的js文件jquery.min.jsjquery.easyui.min.jsjquery.easyui-lang-zh_CN.js ? 3. 注意：themes中的文件相對路徑不能變。 <!-- 引入EasyUI的css依賴 --> <link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css"> ? <!-- 引入EasyUI的圖標依賴 --> <link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css"> ? <!-- 引入EasyUI的相關JS依賴 --> <script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.min.js"></script> ? <script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.easyui.min.js"></script> ? <script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/locale/easyui-lang-zh_CN.js"></script> ??
3.EasyUI入門示例
需求：將a鏈接標簽轉換成easy樣式按鈕。
3.1 標準開發步驟
使用EasyUI中的linkbutton按鈕插件實現該需求。
標簽： <a href="#">按鈕</a> ? 樣式名： 規范: easyui-樣式名<a href="#" class="easyui-linkbutton">按鈕</a> js插件名： $("選中超鏈接").插件名(); $("a").linkbutton();3.2 代碼模板
-
實現方式一：HTML標簽+EasyUI樣式
-
實現方式二：HTML標簽+編程插件方法
3.3 EasyUI的三大基礎概念
分別是：屬性，事件，方法
-
屬性指的是EsayUI框架控件（HTML）的屬性（設置插件的樣式。圖標，寬度，高度）
-
事件指的是 EasyUI 框架控件可以觸發的事件（如：點擊事件、雙擊事件等）
-
方法指的是 EasyUI 框架控件，只有調用了默認執行的邏輯代碼塊。（修改插件屬性，狀態。）
3.3.1 屬性設置
（1）HTML方式設置
<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數名"></標簽>經典示例
<!-- HTML標簽 + esyui-樣式 --> <!-- iconCls 圖標 --> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">風清揚</a>（2）基于javascript方式設置
<標簽 id = "tag"></標簽> $("#tag").插件名({屬性名:屬性值,屬性名:屬性值 }); <!-- 注意事項：1.字符串類型的數值一定要有引號（單引號，或者雙引號都可以）2.屬性之間使用逗號分隔，最后一個屬性不可以有逗號 -->經典實例
<!-- HTML標簽+ easyui 插件方法 --> <a style="color: green;" id="btn1" href="#">風清揚</a> <script>//使用easyui按鈕插件$("#btn1").linkbutton({iconCls:'icon-cancel',size:'large'}); </script>3.3.2 事件觸發設置
（1）HTML方式設置[不推薦]
<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數名"></標簽>經典示例
<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黃浩</a> <script>function testEvent(){alert("我被點了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");//調用按鈕的 disable方法。//$("按鈕").linkbutton('disable');$("a:first").linkbutton('disable');} </script>（2）基于javascript方式設置
<標簽 id = "tag"></標簽> $("#tag").插件名({屬性名:屬性值,屬性名:屬性值,事件名:function(){ ?} });經典示例
<a style="color: green;" id="btn1" href="#">風清揚</a> <script>//使用easyui按鈕插件$("#btn1").linkbutton({onClick:function(){alert("風清揚，被點了。");} }); </script>3.3.3 方法調用設置
調用模板： $("標簽").easyui插件名('方法名',方法傳入的參數); ? 例如： $('#btn1').linkbutton('resize', {width: '100%',height: 32 }); ?4.注意事項
我們必須要理解屬性、事件、方法的使用方式，因為所有的EasyUI組件的就是千篇一律地使用上述的這三種概念的知識完成界面的構建以及事件的觸發。
問題：EsayUI有很多組件，那么屬性、事件、方法、去哪里找呢？
答：直接通過它的官方幫助文檔，也可以在代碼的src文件夾下查找
--通過官方 API（可以在網上找到中文版的）
?
--通過src目錄與plugins目錄的文件代碼查看。
src目錄是EsayUI的基礎模塊代碼，plugins目錄存放的是基于基礎模塊擴展的控件的實現代碼
?
5.關于組件之間的依賴關系
通過官方的API文檔，我們發現有很多控件與控件之間是有依賴關系的。
所以，如果當屬性、事件、方法在當前控件找不到，可以去它的父控件上面去尋找。
6.控件使用說明
常用控件： 包括了Base（基礎）、Layout（布局）、Menu and Button（菜單和按鈕）、Form（表單）、Window（窗口）、 DataGrid and Tree（表格和樹）、Extension（擴展）本節課主要講述以下組件的使用：
layout（布局組件）：panel面板，tabs選項卡，accordion分類，layout布局
7.布局·layout
布局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。每個邊緣區域面板都可以通過拖拽其邊框改變大小，也可以點擊折疊按鈕將面板折疊起來。布局可以進行嵌套，用戶可以通過組合布局構建復雜的布局結構。
?
<!-- fit:true 自適應屏幕 --> <div id="cc" class="easyui-layout" ?data-options = "fit:true"> ? <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> ? <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> ? <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> ? <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> ? <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> ? </div> ?8.面板·panel
panel是最為基礎的布局組件， 其他layout、accordion和tab等布局組件都要依賴panel。panel是一個容器，在他內部可以創建其他組件。
關于panel面板的屬性，事件，方法可查閱API文檔了解使用
8.1 經典示例
<!-- panel面板基本示例 --> <div id = "oDiv" class = "easyui-panel">helloworld<a id = "btn" href = "#" class = "easyui-linkbutton">按鈕</a> </div> <script type = "text/javascript">$("#oDiv").panel({//設置標題title:'我是標題',//設置圖標iconCls:'icon-man',//設置寬度width:500,//設置高度height:400,//可折疊collapsible:true,//可放大maximizable:true,//可縮小minimizable:true,//可關閉closable:true,//綁定按鈕組tools:"#btn",//ajax異步加載遠程的內容，顯示在面板中href:'${pageContext.request.contextPath }/index.jsp'}); </script>總結
以上是生活随笔為你收集整理的easyui（基础布局）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动端开发——javascript
- 下一篇： 根据实例类型反射操作数据库（简单通用表操