jQuery EasyUI 入門必看,jqueryeasyui
學習要點:
1.什麼是 jQuery EasyUI
2.學習 jQuery EasyUI 的條件 3.jQuery EasyUI 的功能和優勢
4.其他的 UI 外掛程式
5.是否相容低版本 IE
6.下載及運行 jQuery EasyUI
在正式瞭解 jQuery EasyUI 之前,我們先瞭解一下什麼是 jQuery EasyUI。它的學習條件、市場上的同類產品、所支援的瀏覽器等。然後配置運行 jQuery EasyUI。
一.什麼是 jQuery EasyUI
jQuery EasyUI 是一組基於 jQuery 的 UI 外掛程式集合,而 jQuery EasyUI 的目標就是協助Web 開發人員更輕鬆的打造出功能豐富並且美觀的 UI 介面。開發人員不需要編寫複雜的JavaScript,也不需要對 css 樣式有深入的瞭解,開發人員需要瞭解的只有一些簡單的 html 標籤。
官方網站:http://www.jeasyui.com
二.學習 jQuery EasyUI 的條件
因為 jQuery EasyUI 是基於jQuery 的 UI 庫,所以,必須需要 jQuery 課程的基礎。而jQuery需要那些基礎,直接參考 jQuery 課程 66 課第一節內容。
三.jQuery EasyUI 的特點
1.基於 jquery 使用者介面外掛程式的集合;
2.為一些當前用於互動的 js 應用提供必要的功能;
3.使用 EasyUI 你不需要寫很多的 javascript 代碼,通常只需要寫 HTML 標籤來定義使用者介面即可;
4.支援 HTML5;
5.開發產品時可節省時間和資源;
6.簡單,但很強大;
7.支援擴充,可根據自己的需求擴充控制項;
8.目前各項不足正已版本遞增的方式不斷完善;
9.原始碼加密,商業版付費
四.其他的 UI 外掛程式
除了 jQuery EasyUI 之外,還有 DWZ(國產的,基於 jQuery 的 UI 外掛程式),還有一個獨立的 ExtJS 的 UI 外掛程式。
五.是否相容低版本 IE
我們將要使用最新的 jQuery EasyUI 版本:1.3.5,它裡面內建的 jQuery 版本是 2.0。也 就是說,不再支援 IE6,7,8 這三款瀏覽器了。如果你必須要使用,可以選擇更低版本。當然,我們已經不在建議相容這些版本了。最基本的原因是:jQuery EasyUI 很少用於 Web 應用的前台頁面,一般用於背景 UI 或者企業級應用的 UI(較為重)。那麼使用這些功能的使用者不會那麼魚龍混雜,一般會被要求使用更進階的瀏覽器,所以沒有必要向下相容。
PS:有部分使用者堅持使用 IE6,聲稱未來會一直使用 IE6。那麼我建議放棄這樣的使用者,因為 IE6 效能低下、記憶體流失、不支援進階特性,成倍的開發成本。如果失去這樣的使用者,就面臨停工,那麼死也要會死的痛快點,而如果活下來,那麼也會非常愉快。可是,總是迎合這些低品質使用者,你就像得了慢性病一樣,每天折磨著,痛苦地慢慢死去,就算公司倒閉了,那些客戶還不停電話說,系統有問題,你還要不停解釋公司倒閉了,技術人員全跑了。
六.下載及運行 jQuery EasyUI
下載最新的 jQuery EasyUI1.3.5 版本,然後解壓後直接使用即可。
//HTML5 調用 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 的格式,但所有標籤還是沿用 XHTML 的,並為真正涉及到HTML5 的標籤和 CSS。
以上這篇jQuery EasyUI 入門必看就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援幫客之家。