當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

EasyUI(前端框架)

發布時間：2023/12/3 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI(前端框架) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一節 EasyUI的介紹和常用組件

[1]EasyUI的介紹

介紹:

EasyUI是一個前端開發的框架，其將常用的頁面開發使用的組件進行了
封裝，前端開發人員只需將EasyUI的資源導入項目后使用即可，快速
提升開發效率。

使用：

① 導入EasyUI的資源
② 查閱API文檔使用EasyUI的組件完成頁面開發

注意：

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

[2] EasyUI的常用組件

EasyUI的資源介紹

① 將從官網上下載的EasyUI的資源壓縮包解壓

② demo文件夾
EasyUI官方提供的每個組件的使用示例效果代碼。
③ locale文件夾:組件中顯示的數據語言的js文件
④ plugins文件夾:是EasyUI提供的組件對應的js文件
⑤ src文件夾:源碼文件夾
⑥ themes文件夾：EasyUI官方提供的整套的樣式
⑦ jquery.min.js文件:依賴的jquery文件，建議使用官方提供的jquery文件
不要自己隨便更換版本，可能會造成版本不兼容。
⑧ jquery.easyui.min.js：封裝了所有組件的js文件

2.EasyUI的常用組件

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

第二節 EasyUI的組件使用

[1] easyui-panel 面板

作用:

在網頁中顯示一個面板效果，可以在面板中顯示網頁中的數據

使用:

① 在jsp頁面中引入EasyUI的資源
② 在頁面創建一個div標簽，并設置其class屬性，屬性值為‘easyui-panel’
③ 在div標簽上使用屬性data-options設置面板的初始化效果，設置組件的屬性和事件，以鍵值對的形式設置，不同的鍵值對使用逗號隔開。
④ 可以使用jquery來調用組件提供的方法，根據用戶在網頁中的行為動作對組件作出對應的操作。

使用的效果示例代碼:

<%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=basePath %>"/><title>Title</title><%--引入easyUI的資源--%><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><link rel="stylesheet" type="text/css" href="themes/demo.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><%--聲明js代碼域--%><script type="text/javascript">function test(){$("#my").panel('setTitle','設置標題');}</script> </head> <body> <input type="button" value="測試組件方法的使用" onclick="test()"><%--1.通過標簽創建panel組件--%><div style="width: 350px;height: 350px;border: solid 1px;"><div id="my" class="easyui-panel"data-options="title:'我是面板',iconCls:'icon-edit',left:200,top:300,fit:true,content:'我是面板主體',collapsible:true,maximizable:true,onMaximize:function(){alert('aa')}"style="width: 300px;height: 300px;"></div></div> </body> </html>

效果圖：

[2] easyui的組件使用流程

在jsp中引入EasyUI的資源

在jsp頁面使用HTML方式或者js方式創建組件

使用組件的屬性和事件來初始化設置組件的效果

使用組件的方法實現組件和用戶交互的效果

[3]easyui-textbox組件

聲明一個普通的input文本標簽

通過js代碼的方式完成textbox組件初始化效果元素標簽
.組件名({屬性:值，屬性:值,…,事件名:函數…})

3.代碼示例:

$(function () {$("#uname").textbox({width:300,height:55,label:'用戶名:',labelPosition:'top',prompt:'請輸入用戶名',onChange:function (newValue,oldValue) {//失去焦點的時候觸發console.log(newValue+":"+oldValue);}}) })

[4]easyui-passwordbox組件

作用:在頁面中顯示一個密碼框
使用:HTML標簽方式或者js方式，參照API文檔
效果示例：

代碼示例:

[5] easyui-combobox下拉框組件

作用: 在頁面中顯示一個下拉框效果，提供了豐富的屬性和事件可以讓我們
根據需求來設置自己想要的組件效果。

使用：使用HTML標簽方式或者js方式完成創建和初始化設置，參照API

示例代碼:

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option><option>ditem4</option><option>eitem5</option> </select>

示例圖:

[6] easyui-datebox 日期框

作用:在頁面中顯示一個可以選擇日期的文本框

使用:使用HTML標簽創建和初始化或者使用js方式創建和初始化

示例代碼:

① 使用js在初始化創建datebox時完成日期格式的自定義顯示

/******************初始化設置datebox**********************************************/$(function () {$("#dd").datebox({formatter:function (date) {var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return y+"-"+m+"-"+d;},parser:function (s) {var t = Date.parse(s);if (!isNaN(t)){return new Date(t);} else {return new Date();}}})})

② 使用HTML標簽創建和初始化datebox

<%--datebox日期框--%><input id="dd" type="text" class="easyui-datebox"data-options="editable:false,currentText:'今天',closeText:'關閉'">

效果圖:

[7] easyui-layout布局組件

作用: 使用該組件可以快速完成網頁的布局效果

使用:使用HTML完成頁面組件，具體參照API

方式:
① 在div中進行布局
② 在整個頁面中
③ 嵌套布局

布局區域:東，南，西，北，中五個區域，每個區域都是可選的。

示例代碼:

效果圖:

[8] easyui-Accordion折疊面板

作用: 在網頁中顯示一個可以折疊的面板效果

使用：使用Html標簽完成創建和初始化設置

代碼示例:

<%--accordion組件完成折疊效果--%> <div id="aa" class="easyui-accordion" data-options="fit:true,border:false,animate:true,selected:1" style="width:300px;height:200px;"><%--折疊區域--%><div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"><h3 style="color:#0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery.It lets you define your accordion component on web page more easily.</p></div><%--折疊區域--%><div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">content2</div><%--折疊區域--%><div title="Title3">content3</div> </div>

效果圖:

[9]easyui-tree 樹組件

作用：在頁面中顯示樹狀數據，主要用來顯示有層級關系的數據。

使用：使用HTML標簽創建和初始化，使用js方式創建和初始化

示例代碼:

/****************設置樹組件*************************/$(function () {$("#myTree").tree({onClick:function (node) {console.log(node)}})}) <%--聲明樹狀的ul容器--%> <ul id="myTree" class="easyui-tree"><%--聲明一級菜單--%><li><span>超市購物網站</span><%--聲明二級菜單細信息--%><ul><li>天貓超市</li><li>京東超市</li><li>永輝超市</li></ul></li><%--聲明一級菜單信息--%><li><span>電器購物網站</span><%--聲明二級菜單信息--%><ul><li>京東</li><li>蘇寧</li><li>國美</li></ul></li><%--普通一級菜單--%><li><span>淘寶網</span></li> </ul>

4.效果示例圖:

[10]easyui-tabs選項卡組件

作用:以標簽頁的形式在一塊區域顯示多個內容

使用: 使用HTML標簽直接創建和初始化或者使用js方式創建和初始化

代碼示例:

<%--創建選項卡容器--%> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"><%--選項卡面板--%><div title="Tab1" style="padding:20px;display:none;"> tab1</div><%--選項卡面板--%><div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2</div><%--選項卡面板--%><div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab3</div> </div>

效果圖示例:

第三節 tree菜單和選項卡的聯動實現

[1] 功能需求

點擊樹狀菜單的時候，可以在頁面的中心區域中新增一個選項卡，顯示當前
菜單的資源。如果當前菜單對應的選項卡已經存在，則不會重新創建，而是
選擇已經存在的選項卡顯示給用戶。具有子菜單的一級菜單是無需創建選項卡的

[2] 功能實現

① 給樹狀菜單的節點增加單擊事件
② 在樹節點的單擊事件中校驗當前點擊的是資源跳轉菜單還是一級菜單
③ 在樹節點的單擊事件中增加新增選項卡的邏輯
④ 判斷菜單節點的選項卡是否存在如果已經存在，則選中，而不是創建

[3] 示例代碼

$(function () {$("#myTree").tree({onClick:function (node) {//判斷當前點擊的節點是否具有子節點var cs=node.children;if(!cs){//判斷菜單節點的選項卡是否存在var flag=$("#tt").tabs('exists',node.text);if(flag){//選中菜單節點對用的選項卡$("#tt").tabs('select',node.text);}else{//新增選項卡$("#tt").tabs('add',{title:node.text,closable:true})}}}}) })

[4] 效果圖

第四節 Linkbutton組件

[1] 組件的介紹

以前我們是自己在網頁上聲明按鈕，完成網頁和用戶的交互操作。而我們的超鏈接
除了作為資源跳轉的使用以外，也可以作為一個按鈕的效果存在。只不過，我們自己使用超鏈接作為單擊按鈕，樣式比較丑，而EasyUI將其封裝了，我們調用即可。

[2] 組件的作用

在頁面中顯示一個按鈕效果，本質:是一個超鏈接。

[3] 組件的使用

<%--linkbutton組件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">測試linkbutton按鈕</a>

[4] 組件效果圖

第五節 messager消息框組件

組件的介紹

目前我們喜歡在js代碼中使用alert語句來在頁面彈出一個窗口，來提示用戶。
但是我們發現，不同的瀏覽器alert的效果是不同的。我們希望在不同的瀏覽器
中顯示相同的效果怎么辦？原因是alert本質是在調用瀏覽器自帶的彈框效果，
我們提供一個自己的即可。EasyUI的messager消息框組件已經實現。

[1] 組件的使用

$.messager.alert，相當于alter
$.messager.confirm，相當于confirm
$.messager.prompt,相當于prompt

[2] 代碼示例

/******************messager消息框組件***************************************/$(function () {//給linkbutton增加單擊事件$("#btn").click(function () {//$.messager.alert("警告","你的電腦將在10秒后關機","warning");$.messager.confirm('確認框', '你確定要刪除嗎?', function (r) {if (r) {alert("aaa:"+r);}});})})

[3] 效果圖

總結

以上是生活随笔為你收集整理的EasyUI(前端框架)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： i7苹果笔记本配置怎样？
下一篇：上班族怎样摆放电脑才正确电脑如何摆放