一.jQuery EasyUI簡介

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

二.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

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

1.2 jQuery Easy的作用

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

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

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

locale：編碼支持庫

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

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

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

easyloader.js：源碼加載器

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

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

jquery.min.js：Jquery框架

2.WEB項目搭建EasyUI環境

搭建環境的步驟如下：

?<!-- 引入EasyUI的css依賴 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css">

<!-- 引入EasyUI的圖標依賴 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/icon.css">

<!-- 引入EasyUI的相關JS依賴 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

3.EasyUI入門示例

需求：將a鏈接標簽轉換成easy樣式按鈕。

3.1 標準開發步驟

使用EasyUI中的linkbutton按鈕插件實現該需求。

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

3.3 EasyUI的三大基礎概念

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

屬性指的是EsayUI框架控件（HTML）的屬性（設置插件的樣式。圖標，寬度，高度）

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

方法指的是 EasyUI 框架控件，只有調用了默認執行的邏輯代碼塊。（修改插件屬性，狀態。）

3.3.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>

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

調用模板：
$("標簽").easyui插件名('方法名',方法傳入的參數);
?
例如：
$('#btn1').linkbutton('resize', {
? ? width: '100%',
? ? height: 32
});
?

總結

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

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