jQuery EasyUI 入門必看

更新時間：2016年06月03日 08:51:01 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query EasyUI 入門必看。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

學(xué)習(xí)要點：

1.什么是 jQuery EasyUI

2.學(xué)習(xí) jQuery EasyUI 的條件 3.jQuery EasyUI 的功能和優(yōu)勢

4.其他的 UI 插件

5.是否兼容低版本 IE

6.下載及運行 jQuery EasyUI

在正式了解 jQuery EasyUI 之前，我們先了解一下什么是 jQuery EasyUI。它的學(xué)習(xí)條件、市場上的同類產(chǎn)品、所支持的瀏覽器等。然后配置運行 jQuery EasyUI。

一．什么是 jQuery EasyUI

jQuery EasyUI 是一組基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目標(biāo)就是幫助Web 開發(fā)者更輕松的打造出功能豐富并且美觀的 UI 界面。開發(fā)者不需要編寫復(fù)雜的JavaScript，也不需要對 css 樣式有深入的了解，開發(fā)者需要了解的只有一些簡單的 html 標(biāo)簽。

官方網(wǎng)站：http://www.jeasyui.com

二．學(xué)習(xí) jQuery EasyUI 的條件

因為 jQuery EasyUI 是基于jQuery 的 UI 庫，所以，必須需要 jQuery 課程的基礎(chǔ)。而jQuery需要那些基礎(chǔ)，直接參考 jQuery 課程 66 課第一節(jié)內(nèi)容。

三．jQuery EasyUI 的特點

1.基于 jquery 用戶界面插件的集合；

2.為一些當(dāng)前用于交互的 js 應(yīng)用提供必要的功能；

3.使用 EasyUI 你不需要寫很多的 javascript 代碼，通常只需要寫 HTML 標(biāo)記來定義用戶界面即可；

4.支持 HTML5；

5.開發(fā)產(chǎn)品時可節(jié)省時間和資源；

6.簡單，但很強大；

7.支持?jǐn)U展，可根據(jù)自己的需求擴展控件；

8.目前各項不足正已版本遞增的方式不斷完善；

9.源代碼加密，商業(yè)版付費

四．其他的 UI 插件

除了 jQuery EasyUI 之外，還有 DWZ（國產(chǎn)的，基于 jQuery 的 UI 插件），還有一個獨立的 ExtJS 的 UI 插件。

五．是否兼容低版本 IE

我們將要使用最新的 jQuery EasyUI 版本：1.3.5，它里面自帶的 jQuery 版本是 2.0。也就是說，不再支持 IE6,7,8 這三款瀏覽器了。如果你必須要使用，可以選擇更低版本。當(dāng)然，我們已經(jīng)不在建議兼容這些版本了。最基本的原因是：jQuery EasyUI 很少用于 Web 應(yīng)用的前臺頁面，一般用于后臺的 UI 或者企業(yè)級應(yīng)用的 UI（較為重）。那么使用這些功能的用戶不會那么魚龍混雜，一般會被要求使用更高級的瀏覽器，所以沒有必要向下兼容。

PS：有部分用戶堅持使用 IE6，聲稱未來會一直使用 IE6。那么我建議放棄這樣的用戶，因為 IE6 性能低下、內(nèi)存泄漏、不支持高級特性，成倍的開發(fā)成本。如果失去這樣的用戶，就面臨停工，那么死也要會死的痛快點，而如果活下來，那么也會非常愉快?？墒牵偸怯线@些低質(zhì)量用戶，你就像得了慢性病一樣，每天折磨著，痛苦地慢慢死去，就算公司倒閉了，那些客戶還不停電話說，系統(tǒng)有問題，你還要不停解釋公司倒閉了，技術(shù)人員全跑了。

六．下載及運行 jQuery EasyUI

下載最新的 jQuery EasyUI1.3.5 版本，然后解壓后直接使用即可。

//HTML5 調(diào)用 jQuery EasyUI

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
  </head>
  <body>
    <div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
      dialog content.
    </div>
  </body>
</html>

PS：雖然我們用了 HTML5 的格式，但所有標(biāo)簽還是沿用 XHTML 的，并為真正涉及到HTML5 的標(biāo)簽和 CSS。

以上這篇jQuery EasyUI 入門必看就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: