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]创建与设置默认控制器及载入