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