目錄

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

2、?jQuery Easy的作用

3、EasyUI的目錄說明

二、?WEB項目搭建EasyUI環(huán)境

?1、導入需要的css樣式文件。

?2、?導入相關(guān)的js文件

?3、完整導入：

?三、EasyUI入門示例

1、標準開發(fā)步驟

2、 代碼模板

四、EasyUI的三大基礎(chǔ)概念

1、 屬性設(shè)置

2、事件觸發(fā)設(shè)置

3、方法調(diào)用設(shè)置

---

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

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

2、?jQuery Easy的作用

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

3、EasyUI的目錄說明

?① 下載路徑

? ? ? ? ?EasyUI的官網(wǎng)地址為：http://www.jeasyui.com/?

② 目錄說明

?demo：例示，非常重要，以后做開發(fā)，記不起來代碼，可以直接復制例示。

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

?locale：編碼支持庫

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

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

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

easyloader.js：源碼加載器

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

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

?jquery.min.js：Jquery框架

二、?WEB項目搭建EasyUI環(huán)境

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

?1、導入需要的css樣式文件。

?easyui.css ?

?icon.css

?2、?導入相關(guān)的js文件

? ?jquery.min.js
? ?jquery.easyui.min.js
? ?jquery.easyui-lang-zh_CN.js
?

?3、完整導入：

? ? ? 注意：themes中的文件相對路徑不能變。

<!-- 引入EasyUI的css依賴 --> <link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/themes/gray/easyui.css"><!-- 引入EasyUI的圖標依賴 --> <link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/themes/icon.css"><!-- 引入EasyUI的相關(guān)JS依賴 --> <script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/jquery.min.js"></script><script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/jquery.easyui.min.js"></script><script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>

?三、EasyUI入門示例

? ? ?需求：將a鏈接標簽轉(zhuǎn)換成easy樣式按鈕。

1、標準開發(fā)步驟

?使用EasyUI中的**linkbutton按鈕插件**實現(xiàn)該需求。
?標簽： <a href="#">按鈕</a>
?樣式名： 規(guī)范: easyui-樣式名
? ? ? ? <a href="#" class="easyui-linkbutton">按鈕</a>
?js插件名：
? ? ?$("選中超鏈接").插件名();
? ? ?$("a").linkbutton();
?

2、 代碼模板

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

<!-- HTML標簽+EasyUI樣式 --><a href = "#" class = "easyui-linkbutton">諾糯米</a>

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

<!-- HTML標簽+ easyui 插件方法 --><a style="color: green;" id="btn1" href="#">米努米</a><script>//使用easyui按鈕插件$("#btn1").linkbutton();</script>

四、EasyUI的三大基礎(chǔ)概念

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

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

1、 屬性設(shè)置

（1）HTML方式設(shè)置
? ? ? ?<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數(shù)名"></標簽>

<!-- HTML標簽 + esyui-樣式 --> <!-- iconCls 圖標 --> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">糯米諾</a>

（2）基于javascript方式設(shè)置
?<標簽 id = "tag"></標簽>
?$("#tag").插件名({
? ? ?屬性名:屬性值,
? ? ?屬性名:屬性值
?});
?注意事項：
? ? ?1.字符串類型的數(shù)值一定要有引號（單引號，或者雙引號都可以）
? ? ?2.屬性之間使用逗號分隔，最后一個屬性不可以有逗號

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

2、事件觸發(fā)設(shè)置

（1）HTML方式設(shè)置[不推薦]
? ?<標簽 class = "easyui-樣式名" data-options = "屬性名:值,屬性名:值,事件名:事件函數(shù)名"></標簽>

<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">嘟嘟</a><script>function testEvent(){alert("我被點了！！！");//調(diào)用按鈕的 disable方法。//$("按鈕").linkbutton('disable');$("a:first").linkbutton('disable');} </script>

（2）基于javascript方式設(shè)置
?<標簽 id = "tag"></標簽>
?$("#tag").插件名({
? ? ?屬性名:屬性值,
? ? ?屬性名:屬性值,
? ? ?事件名:function(){
? ? }
?});

<a style="color: green;" id="btn1" href="#">嘟嘟</a><script>//使用easyui按鈕插件$("#btn1").linkbutton({onClick:function(){alert("嘟嘟，被點了。");}}); </script>

?

3、方法調(diào)用設(shè)置

? ?調(diào)用模板：
? ? ? ?$("標簽").easyui插件名('方法名',方法傳入的參數(shù));

$('#btn1').linkbutton('resize', {width: '100%',height: 32});

?

總結(jié)

以上是生活随笔為你收集整理的jQuery EasyUI快速入门01的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。