使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門(mén)指引
一．jQuery UI
jQuery UI 是以jQuery 為基礎(chǔ)的開(kāi)源JavaScript 網(wǎng)頁(yè)用戶(hù)界面代碼庫(kù)。包
含底層用戶(hù)交互、動(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 不同組件的引入都有類(lèi)似的特點(diǎn)和語(yǔ)法，所以這里只介紹兩種組件
的引入方式，這樣可以以此類(lèi)推其他組件的引入方式。
button 按鈕
//將button 按鈕設(shè)置成UI
$('#button').button();
dialog 對(duì)話框
//將div 設(shè)置成dialog 對(duì)話框
$('#dialog ').click(function () {
$("#dialog ").dialog();
});
這樣的形式，可以得知，jQuery UI的引入都是這樣的 組件名() 方法的形式引入。
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁(yè)按鈕并能直接刷新
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁(yè)按鈕并能直接刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過(guò)服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
這篇文章主要介紹了jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值的具體實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
jQuery移除tr無(wú)效的解決方法(tr是動(dòng)態(tài)添加)
移除掉某些tr（tr是動(dòng)態(tài)添加的）嘗試了很多方法，都不見(jiàn)效，后來(lái)發(fā)現(xiàn)個(gè)不錯(cuò)的方法，于是與大家分享下2014-09-09
Jquery實(shí)時(shí)監(jiān)聽(tīng)input value的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery實(shí)時(shí)監(jiān)聽(tīng)input value的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
本文給大家分享的是一個(gè)使用jQuery插件windowScroll實(shí)現(xiàn)的單屏滾動(dòng)的特效，主要參考搜狗瀏覽器4.2版本首頁(yè)的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯，非常的實(shí)用。2015-07-07
jQuery實(shí)現(xiàn)可關(guān)閉固定于底（頂）部的工具條菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)可關(guān)閉固定于底（頂）部的工具條菜單效果,可實(shí)現(xiàn)固定位置顯示及響應(yīng)鼠標(biāo)點(diǎn)擊展開(kāi)與關(guān)閉的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11
獲取復(fù)選框的值的方法有很多，舉不勝舉，在本文將為大家介紹下jquery是如何獲取復(fù)選框的值的，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框...2007-03-03
jQuery中彈出iframe內(nèi)嵌頁(yè)面元素到父頁(yè)面并全屏化的實(shí)例代碼
這篇文章主要介紹了jQuery中彈出iframe內(nèi)嵌頁(yè)面元素到父頁(yè)面并全屏化的實(shí)例代碼,需要的朋友可以參考下2016-12-12