JQuery EasyUI框架

本文轉載自查看原文 2019-07-23 19:33 1655 java框架二

1. JQuery EasyUI框架概述

1.1. JQuery EasyUI是什么東西

答：JQuery EasyUI就是一套基礎JQuery的富客戶端的UI框架。像這些將常用的控件封裝成一個UI庫的框架統稱富客戶端框架。

1.2. JQuery EasyUI的作用是什么

答：既然EasyUI是一個UI框架，所以它的功能就是用於處理頁面的展示效果的。通常用於完成后台管理系統的頁面排版。

現在市面有哪些常用富客戶端框架

答：EasyUI、LigerUI、ExtJS

1.3. EasyUI的目錄說明

1.3.1. 下載路徑

EasyUI的官網地址為：http://www.jeasyui.com/

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框架

1.4. EasyUI入門示例

1.4.1. 開發步驟：

需求：使用EasyUI實現一個拖拉的層。

1.4.1.1. 第一步：導入EasyUI的庫文件

創建一個項目，將easyui的js的框架復制到項目里

1.4.1.2. 第二步：編寫代碼

編寫一個easyui-draggable.html文件

<!DOCTYPE html>

<html>

<head>

//$(function(){});

$(document).ready(function(){

//alert("-測試-");

$("#cc").draggable({

//值字符串類型，需要引號

handle:'#title'

});

</script>

</head>

<body>

==HTML格式==

<hr/>

<!--

控件引用：easyui-控件名

屬性的設置:data-options="屬性名:值"

-->

</div>

<br/>

==javascript格式==

<hr/>

</div>

</body>

</html>

1.5. EasyUI的三大基礎概念

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

屬性指的是EsayUI框架控件（HTML）的屬性

事件指的是 EasyUI 框架控件可以觸發的事件（如：點擊事件、雙擊事件等）

方法指的是 EasyUI 框架控件，只有調用了默認執行的邏輯代碼塊。

1.5.1. 屬性設置

1.javascript方式設置：

格式：$(選擇器).組件名({屬性名:值});

注意事項

字符串類型的數值一定要有引號（單引號，或者雙引號都可以）
屬性之間使用逗號分隔，最后一個屬性不可以有逗號

$("#cc").draggable({

//值字符串類型，需要引號

handle:'#title'

});

2.HTML方式設置：

格式：data-options=”屬性名:值,屬性名：值”

data-options="handle:'#title'"

1.5.2. 事件觸發

JavaScript方式觸發:

格式：$(選擇器).組件名({事件名:function(參數列表){}});

$("#cc").draggable({

//以后在easyui里看到e是一個事件參數

onDrag:function(e){

console.log('x:'+e.pageX+'y:'+e.pageY);

}

});

2.HTML方式觸發：

格式：data-options=”事件名:function(){}”

一般情況下不用

<div class="easyui-draggable" data-options="handle:'#title',onDrag:function(e){console.log('x'+e.pageX+',Y:'+e.pageY);}" style="width: 100px;height: 100px;border: 1px solid #ccc;

</div>

1.5.3. 方法調用

JavaScript方式調用:

無參數格式：$(選擇器).組件名(“方法名”);

$("#cc").draggable("disable");

有參數的格式：$(選擇器).組件名(“方法名”,參數1,參數2....);

$("#btn4").click(function(){

$('#pp').pagination("select",3);

});

有返回的方法格式：

var 變量名=$(選擇器).組件名(“方法名”,參數1,參數2....);
var 變量名=$(選擇器).組件名(“方法名”);

//getValue獲取搜索值

$("#btn1").click(function(){

var value=$('#ss').searchbox("getValue");

alert(value);

});

--注意：方法調用沒有HTML調用的格式。

1.5.4. 注意事項

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

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

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

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

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

src目錄是EsayUI的基礎模塊代碼，plugins目錄存放的是基於基礎模塊擴展的控件的實現代碼

1.5.5. 關於組件之間的依賴關系

通過官方的API文檔，我們發現有很多控件與控件之間是有依賴關系的。

如：SearchBox（搜索框）：依賴textbox與menubutton組件。

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

2. 控件使用說明

本章的學習就是對EasyUI框架，提供的常用控件。包括了基礎控件、布局控件、菜單、按鈕、菜單、表單控件、窗口控件、表格控件、樹控件

學習難點：

布局控件
表格控件
樹控件

2.1. Base（基礎）

基礎控件全部控件如下：

我們主要通過常用的來教學，如果對於本講義沒有提及的控件，可以在學習完后，可以通過官方提供的的Demo配置API 文檔了解。

拖動控件
分頁控件
搜索框控件
提示框控件

2.1.1. Draggable（拖動）

2.1.1.1. HTML方式創建

class：通過class選擇器，指定框架名

data-options：通過EasyUI框架自定義的屬性data-options指定handle屬性

<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>

</div>

2.1.1.2. JavaScript方式創建

--HTM代碼

<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>

</div>

--通過JavaScript創建控件

$('#dd').draggable({

handle:'#title'

});

--注意：JavaScript與HTML綁定的ID必須要一一對應

handle屬性：開始拖動的句柄。就是只有按住Title這個DIV才可以拖動

2.1.1.3. 結果展示

2.1.2. Pagination（分頁）

2.1.2.1. HTML方式創建

</div>

2.1.2.2. JavaScript方式創建

--HTML聲明代碼

</div>

--Javscript代碼

$('#pp').pagination({

total:114,

pageSize:10

});

2.1.2.3. 結果展示

2.1.3. SearchBox（搜索框）

2.1.3.1. HTML方式創建

</div>

<div data-options="name:'sports'">Sports News</div>

</div>

function doSearch(value,name){

alert('You input: ' + value+'('+name+')');

}

</script>

2.1.3.2. JavaScript方式創建

--HTML DIV代碼

</div>

<div data-options="name:'sports'">Sports News</div>

</div>

function doSearch(value,name){

alert('You input: ' + value+'('+name+')');

}

</script>

--JavaScript創建控件

$('#ss').searchbox({

searcher:function(value,name){

alert(value + "," + name)

menu:'#mm',

prompt:'請輸入值'

});

2.1.3.3. 結果展示

2.1.4. Tooltip（提示框）

2.1.4.1. HTML方式創建

2.1.4.2. JavaScript方式創建

--HTML聲明

--Javascript創建代碼

2.1.4.3. 結果展示

2.2. Layout（布局）

2.2.1. Panel（面板）

2.2.1.1. HTML方式創建

2.2.1.2. JavaScript方式創建

2.2.1.3. 結果展示

2.2.2. Tabs（選項卡）

2.2.2.1. HTML方式創建

2.2.2.2. 結果展示

2.2.3. Accordion（分類）

2.2.3.1. HTML方式創建

2.2.3.2. 結果展示

2.6.3. 注意事項

1.因為一個組件有可能由多個依賴的組件。

跟據組件依賴的不同部分，可以單獨通過ID去定位某一部對應的組件。

如：包括有menu的組件，menu可以單獨使用。

表格DataGrid.數據格式

{total: 200 rows: [

{記錄}

]}

樹的數據格式：

{

id:1

txt:’內容’

children:[

]

}

id：節點ID，對加載遠程數據很重要。

text：顯示節點文本。

state：節點狀態，'open' 或 'closed'，默認：'open'。如果為'closed'的時候，將不自動展開該節點。

checked：表示該節點是否被選中。

attributes: 被添加到節點的自定義屬性。

children: 一個節點數組聲明了若干節點。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【原】jQuery easyUI 快速搭建前端框架 Aps.net mvc4+EasyUI+Jquery安全框架 Jquery Easyui與Jquery Bootstrap的比較 jquery_EasyUI的學習 JQuery EasyUI Message Jquery EasyUI Datagrid的使用 JQuery EasyUI Combobox聯動 jquery easyui后台模板第 1 章 jQuery EasyUI 入門使用 JQuery EasyUI