當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easyui（基础布局）

發(fā)布時間：2023/12/9 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 easyui（基础布局）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一.easyUI的簡介

? ? easyui是一款基于jQuery的前端框架，可以使用其中的組件進行布局以及用來做后臺的管理界面。
? ? EasyUI是一個前端開發(fā)的框架，其將常用的頁面開發(fā)使用的組件進行了封裝，前端開發(fā)人員只需將EasyUI的資源導入項目后使用即可，快速提升開發(fā)效率。

? ? 使用：
?? ?① 導入EasyUI的資源
?? ?② 查閱API文檔使用EasyUI的組件完成頁面開發(fā)

二.easyUI的不足之處

? ? 現(xiàn)在據(jù)了解到有三種UI框架，分別是easyUI、bootstrap、layUI這三種。

? ? 不足之處：從效果來看easyui的界面效果要遠遠差于bootstrap，跟layui比，界面效果也更差

三.學easyUI的好處

? ? 雖然說它的效果界面并不是那么好看，但是它也有它的好處，而且easyUI要簡單學些，如果學會的easyUI框架，那么上手layUI就會輕松許多。

? ? 好處：
?? ?1.從金錢的角度上，開發(fā)首先會排除掉bootstrap。

?? ?2.從學習文檔的完整性、前端框架的穩(wěn)定性，組件的豐富性考慮，easyui都要優(yōu)于layui。

?? ?3.從公司的角度考慮選用那個框架成本、公司的后端技術人員前端功底、前端的社區(qū)活躍度。

? ? 注意：
?? ?使用EasyUI，其實就是在使用別人已經封裝好的代碼來完成自己的頁面開發(fā)。
?? ?所以必須按照EasyUI的文檔說明來使用。所以我們學習EasyUI，其實就是在
?? ?學習如何按照EasyUI的文檔來使用其組件并且其常用組件有哪些。

四.easyUI的特點

? ? easyUI是一種基于jQuery的用戶界面插件集合.

? ? easyUI為創(chuàng)建現(xiàn)代化，互動，JavaScript應用程序，提供必要的功能。

? ? 使用easyUI你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

? ? easyUI是個完美支持HTML5網頁的完整框架。

? ? easyUI節(jié)省了開發(fā)產品的時間和規(guī)模。

? ? easyUI非常簡單，但是功能非常強大

五、EasyUI的常用組件
frameset

① 基礎組件：常用的比較小的功能組件，不是每個網頁中都會用到
② 布局組件: 很重要，每個網頁都會使用，完成網頁的布局的。
③ 菜單與按鈕組件:很重要，每個網頁都會使用，在網頁中完成菜單和按鈕的效果
④ 表單組件:很重要，搜集用戶數(shù)據(jù)，封裝了常用的數(shù)據(jù)校驗，并支持自定義校驗
⑤ 窗口組件:在當前頁面中顯示子窗口效果，對頁面中的功能進行完善。
⑥ 數(shù)據(jù)網格和樹組件:很重要，非常之重要。在網頁中顯示表格以及樹狀數(shù)據(jù)+++++++++++++++++++

jQuery EasyUI簡介：封裝大量的jQuery插件(簡化ajax，jquery，css樣式，布局)

學習目標：

學習內容：

插件實現(xiàn): ① HTML標簽+插件的class樣式。<a href="#" class="easyui-linkbutton">我是講文明</a> ② HTML標簽+基于編程的插件實現(xiàn)<a href='#' id="btn">我是ZKING ZZ</a>js代碼： $("#btn").linkbutton(); ? 插件內容：屬性：設置插件的樣式。圖標，寬度，高度。事件：單擊事件，雙擊方法：修改插件屬性，狀態(tài)。

學習方法：

1. 掌握easyui插件開發(fā)模板[記住] 2. 通過文檔配合，學習他的屬性事件方法。[查看文檔]

day_01 EasyUI （入門）

1.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

JQuery EasyUI就是一套基礎JQuery的富客戶端的UI框架(簡化ajax，jquery，css樣式，布局)。像這些將常用的控件封裝成一個UI庫的框架統(tǒng)稱富客戶端框架

1.2 jQuery Easy的作用

既然EasyUI是一個UI框架，所以它的功能就是用于處理頁面的展示效果的。通常用于完成后臺管理系統(tǒng)的頁面排版。

現(xiàn)在市面有哪些常用富客戶端框架：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：例示，非常重要，以后做開發(fā)，記不起來代碼，可以直接復制例示。

demo-moblie：手機端的例示，因為手機端已經有很多優(yōu)秀UI框架，所以EasyUI在手機端基本沒有人用的（忽略）。

locale：編碼支持庫

plugins：沒有壓縮過的插件源碼

src：沒有壓縮過的核心源碼

themes：主題樣式，有個可以選擇

easyloader.js：源碼加載器

jquery.easyui.min.js：PC使用類庫。

jquery.easyui.moblie.js：手機端使用類庫

jquery.min.js：Jquery框架

2.WEB項目搭建EasyUI環(huán)境

搭建環(huán)境的步驟如下：

1. 導入需要的css樣式文件。easyui.css ? icon.css ? 2. 導入相關的js文件jquery.min.jsjquery.easyui.min.jsjquery.easyui-lang-zh_CN.js ? 3. 注意：themes中的文件相對路徑不能變。

<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css"> ?  <link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css"> ?  <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 標準開發(fā)步驟

使用EasyUI中的linkbutton按鈕插件實現(xiàn)該需求。

標簽： <a href="#">按鈕</a> ? 樣式名：規(guī)范: easyui-樣式名<a href="#" class="easyui-linkbutton">按鈕</a> js插件名： $("選中超鏈接").插件名(); $("a").linkbutton();

3.2 代碼模板

實現(xiàn)方式一：HTML標簽+EasyUI樣式

<a href = "#" class = "easyui-linkbutton">東方不敗</a>

實現(xiàn)方式二：HTML標簽+編程插件方法

<a style="color: green;" id="btn1" href="#">風清揚</a> ? <script>//使用easyui按鈕插件$("#btn1").linkbutton(); </script>

3.3 EasyUI的三大基礎概念

分別是：屬性，事件，方法

屬性指的是EsayUI框架控件（HTML）的屬性（設置插件的樣式。圖標，寬度，高度）
事件指的是 EasyUI 框架控件可以觸發(fā)的事件（如：點擊事件、雙擊事件等）
方法指的是 EasyUI 框架控件，只有調用了默認執(zhí)行的邏輯代碼塊。（修改插件屬性，狀態(tài)。）

3.3.1 屬性設置

（1）HTML方式設置

<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數(shù)名"></標簽>

經典示例

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">風清揚</a>

（2）基于javascript方式設置

<標簽 id = "tag"></標簽> $("#tag").插件名({屬性名:屬性值,屬性名:屬性值 });

經典實例

<a style="color: green;" id="btn1" href="#">風清揚</a> <script>//使用easyui按鈕插件$("#btn1").linkbutton({iconCls:'icon-cancel',size:'large'}); </script>

3.3.2 事件觸發(fā)設置

（1）HTML方式設置[不推薦]

<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數(shù)名"></標簽>

經典示例

<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插件名('方法名',方法傳入的參數(shù)); ? 例如： $('#btn1').linkbutton('resize', {width: '100%',height: 32 }); ?

4.注意事項

我們必須要理解屬性、事件、方法的使用方式，因為所有的EasyUI組件的就是千篇一律地使用上述的這三種概念的知識完成界面的構建以及事件的觸發(fā)。

問題：EsayUI有很多組件，那么屬性、事件、方法、去哪里找呢？

答：直接通過它的官方幫助文檔，也可以在代碼的src文件夾下查找

--通過官方 API（可以在網上找到中文版的）

--通過src目錄與plugins目錄的文件代碼查看。

src目錄是EsayUI的基礎模塊代碼，plugins目錄存放的是基于基礎模塊擴展的控件的實現(xiàn)代碼

5.關于組件之間的依賴關系

通過官方的API文檔，我們發(fā)現(xiàn)有很多控件與控件之間是有依賴關系的。

所以，如果當屬性、事件、方法在當前控件找不到，可以去它的父控件上面去尋找。

6.控件使用說明

常用控件：包括了Base（基礎）、Layout（布局）、Menu and Button（菜單和按鈕）、Form（表單）、Window（窗口）、 DataGrid and Tree（表格和樹）、Extension（擴展）

本節(jié)課主要講述以下組件的使用：

layout（布局組件）：panel面板，tabs選項卡，accordion分類，layout布局

7.布局·layout

布局容器有5個區(qū)域：北、南、東、西和中間。中間區(qū)域面板是必須的，邊緣的面板都是可選的。每個邊緣區(qū)域面板都可以通過拖拽其邊框改變大小，也可以點擊折疊按鈕將面板折疊起來。布局可以進行嵌套，用戶可以通過組合布局構建復雜的布局結構。

<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是一個容器，在他內部可以創(chuàng)建其他組件。

關于panel面板的屬性，事件，方法可查閱API文檔了解使用

8.1 經典示例

<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
下一篇： 2.[Yii]创建与设置默认控制器及载入