這篇文章主要介紹了使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門(mén)指引,jQuery UI是一個(gè)基于jQuery的圖形組件庫(kù),需要的朋友可以參考下

一．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的引入都是這樣的  組件名() 方法的形式引入。