目錄

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

2、?jQuery Easy的作用

3、EasyUI的目錄說明

二、?WEB項目搭建EasyUI環境

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

?2、?導入相關的js文件

?3、完整導入：

?三、EasyUI入門示例

1、標準開發步驟

2、 代碼模板

四、EasyUI的三大基礎概念

1、 屬性設置

2、事件觸發設置

3、方法調用設置

---

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

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

2、?jQuery Easy的作用

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

3、EasyUI的目錄說明

?① 下載路徑

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

② 目錄說明

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

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

?locale：編碼支持庫

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

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

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

easyloader.js：源碼加載器

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

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

?jquery.min.js：Jquery框架

二、?WEB項目搭建EasyUI環境

搭建環境的步驟如下：

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

?easyui.css ?

?icon.css

?2、?導入相關的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的相關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鏈接標簽轉換成easy樣式按鈕。

1、標準開發步驟

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

2、 代碼模板

?實現方式一：HTML標簽+EasyUI樣式

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

-實現方式二：HTML標簽+編程插件方法

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

四、EasyUI的三大基礎概念

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

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

1、 屬性設置

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

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

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

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

2、事件觸發設置

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

<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、方法調用設置

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

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

?

總結

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

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