使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門(mén)指引
一.jQuery UI
jQuery UI 是以jQuery 為基礎(chǔ)的開(kāi)源JavaScript 網(wǎng)頁(yè)用戶界面代碼庫(kù)。包
含底層用戶交互、動(dòng)畫(huà)、特效和可更換主題的可視控件。我們可以直接用它來(lái)構(gòu)建具有很
好交互性的web 應(yīng)用程序。
jQuery UI 的官網(wǎng)網(wǎng)站為:http://jqueryui.com/
jquery-ui-x.xx.x.custom.zip
。里面目錄結(jié)構(gòu)如下:
1.css,包含與jQuery UI 相關(guān)的CSS 文件;
2.js,包含jQuery UI 相關(guān)的JavaScript 文件;
3.Development-bundle,包含多個(gè)不同的子目錄:demos(jQuery UI 示例文件)、docs(jQuery
UI 的文檔文件)、themes(CSS 主題文件)和ui(jQuery ui 的JavaScript 文件)。
4.Index.html,可以查看jQuery UI 功能的索引頁(yè)。
二.CSS 主題
CSS 主題就是jQuery UI 的皮膚,有各種色調(diào)的模版提供使用。對(duì)于程序員,可以使用
最和網(wǎng)站符合的模版;對(duì)于美工,也提供了沒(méi)有任何樣式的模版基于設(shè)計(jì)。
可以在這里:http://jqueryui.com/themeroller/ 查看已有模版樣式。
三. 簡(jiǎn)單引入
由于jQuery UI 不同組件的引入都有類似的特點(diǎn)和語(yǔ)法,所以這里只介紹兩種組件
的引入方式,這樣可以以此類推其他組件的引入方式。
button 按鈕
//將button 按鈕設(shè)置成UI $('#button').button();
dialog 對(duì)話框
//將div 設(shè)置成dialog 對(duì)話框 $('#dialog ').click(function () { $("#dialog ").dialog(); });
這樣的形式,可以得知,jQuery UI的引入都是這樣的 組件名() 方法的形式引入。
相關(guān)文章
jquery dataTable 后臺(tái)加載數(shù)據(jù)并分頁(yè)實(shí)例代碼
本篇文章主要介紹了jquery dataTable 后臺(tái)加載數(shù)據(jù)并分頁(yè)實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個(gè)工程,不知道為什么Search按就總是執(zhí)行兩次。2010-01-01jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法,涉及jquery實(shí)現(xiàn)圖文滑動(dòng)切換效果的方法,涉及jquery針對(duì)頁(yè)面元素與樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開(kāi)的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開(kāi)的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動(dòng)態(tài)添加與刪除的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03基于jquery的網(wǎng)頁(yè)SELECT下拉框美化代碼
基于CSS 和JS的網(wǎng)頁(yè)SELECT下拉框美化,JQUERY 插件,最近為公司的網(wǎng)頁(yè)制做部,開(kāi)發(fā)了一個(gè)用于美化網(wǎng)頁(yè)上select 下拉框的JQUERY插件,拿來(lái)與大家分享。2010-10-10JQEasy-ui在IE9以下版本中二次加載的問(wèn)題分析及處理方法
之前項(xiàng)目中才用了Easy-ui,但是在同時(shí)使用tree和grid的效果時(shí),因?yàn)轫?yè)面有倆個(gè)URL,分別為Ajax樹(shù)去后臺(tái)取數(shù)據(jù)和Grid取數(shù)據(jù),在IE9以上以及其他瀏覽器里都沒(méi)有問(wèn)題,在Ie低版本時(shí)會(huì)出現(xiàn)先加載表格,然后一閃而過(guò)加載樹(shù)渲染頁(yè)面,造成頁(yè)面只有tree數(shù)據(jù)而沒(méi)有表格grid數(shù)據(jù)。2014-06-06