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