jQuery EasyUI 入門(mén)必看
學(xué)習(xí)要點(diǎn):
1.什么是 jQuery EasyUI
2.學(xué)習(xí) jQuery EasyUI 的條件 3.jQuery EasyUI 的功能和優(yōu)勢(shì)
4.其他的 UI 插件
5.是否兼容低版本 IE
6.下載及運(yùn)行 jQuery EasyUI
在正式了解 jQuery EasyUI 之前,我們先了解一下什么是 jQuery EasyUI。它的學(xué)習(xí)條件、市場(chǎng)上的同類(lèi)產(chǎn)品、所支持的瀏覽器等。然后配置運(yùn)行 jQuery EasyUI。
一.什么是 jQuery EasyUI
jQuery EasyUI 是一組基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目標(biāo)就是幫助Web 開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的 UI 界面。開(kāi)發(fā)者不需要編寫(xiě)復(fù)雜的JavaScript,也不需要對(duì) css 樣式有深入的了解,開(kāi)發(fā)者需要了解的只有一些簡(jiǎn)單的 html 標(biāo)簽。
官方網(wǎng)站:http://www.jeasyui.com
二.學(xué)習(xí) jQuery EasyUI 的條件
因?yàn)?jQuery EasyUI 是基于jQuery 的 UI 庫(kù),所以,必須需要 jQuery 課程的基礎(chǔ)。而jQuery需要那些基礎(chǔ),直接參考 jQuery 課程 66 課第一節(jié)內(nèi)容。
三.jQuery EasyUI 的特點(diǎn)
1.基于 jquery 用戶界面插件的集合;
2.為一些當(dāng)前用于交互的 js 應(yīng)用提供必要的功能;
3.使用 EasyUI 你不需要寫(xiě)很多的 javascript 代碼,通常只需要寫(xiě) HTML 標(biāo)記來(lái)定義用戶界面即可;
4.支持 HTML5;
5.開(kāi)發(fā)產(chǎn)品時(shí)可節(jié)省時(shí)間和資源;
6.簡(jiǎn)單,但很強(qiáng)大;
7.支持?jǐn)U展,可根據(jù)自己的需求擴(kuò)展控件;
8.目前各項(xiàng)不足正已版本遞增的方式不斷完善;
9.源代碼加密,商業(yè)版付費(fèi)
四.其他的 UI 插件
除了 jQuery EasyUI 之外,還有 DWZ(國(guó)產(chǎn)的,基于 jQuery 的 UI 插件),還有一個(gè)獨(dú)立的 ExtJS 的 UI 插件。
五.是否兼容低版本 IE
我們將要使用最新的 jQuery EasyUI 版本:1.3.5,它里面自帶的 jQuery 版本是 2.0。也 就是說(shuō),不再支持 IE6,7,8 這三款瀏覽器了。如果你必須要使用,可以選擇更低版本。當(dāng)然,我們已經(jīng)不在建議兼容這些版本了。最基本的原因是:jQuery EasyUI 很少用于 Web 應(yīng)用的前臺(tái)頁(yè)面,一般用于后臺(tái)的 UI 或者企業(yè)級(jí)應(yīng)用的 UI(較為重)。那么使用這些功能的用戶不會(huì)那么魚(yú)龍混雜,一般會(huì)被要求使用更高級(jí)的瀏覽器,所以沒(méi)有必要向下兼容。
PS:有部分用戶堅(jiān)持使用 IE6,聲稱未來(lái)會(huì)一直使用 IE6。那么我建議放棄這樣的用戶,因?yàn)?IE6 性能低下、內(nèi)存泄漏、不支持高級(jí)特性,成倍的開(kāi)發(fā)成本。如果失去這樣的用戶,就面臨停工,那么死也要會(huì)死的痛快點(diǎn),而如果活下來(lái),那么也會(huì)非常愉快??墒?,總是迎合這些低質(zhì)量用戶,你就像得了慢性病一樣,每天折磨著,痛苦地慢慢死去,就算公司倒閉了,那些客戶還不停電話說(shuō),系統(tǒng)有問(wèn)題,你還要不停解釋公司倒閉了,技術(shù)人員全跑了。
六.下載及運(yùn)行 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 入門(mén)必看就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫(huà)效果]
這篇文章主要介紹了jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫(huà)效果],需要的朋友可以參考下2017-07-07基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼,需要的朋友可以參考下。2011-07-07利用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行的方法
下面小編就為大家?guī)?lái)一篇利用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框,需要的朋友可以參考下2012-07-07jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁(yè)面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10jquery.zclip輕量級(jí)復(fù)制失效問(wèn)題
本文主要介紹了解決jquery.zclip輕量級(jí)復(fù)制失效問(wèn)題的工作原理及方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jquery $.ajax各個(gè)事件執(zhí)行順序
jquery中各個(gè)事件執(zhí)行順序如下,使用jquery $.ajax的朋友可以參考下。2010-10-10