首頁  >  文章  >  web前端  >  使用jQuery UI庫開發Web介面的簡單入門指引_jquery

使用jQuery UI庫開發Web介面的簡單入門指引_jquery

WBOY
WBOY原創
2016-05-16 15:04:171271瀏覽

一. jQuery UI
jQuery UI 是以jQuery 為基礎的開源JavaScript 網頁使用者介面程式碼庫。包
包含底層使用者互動、動畫、特效和可更換主題的可視控制。我們可以直接用它來建構具有很
好互動性的web 應用程式。
jQuery UI 的官網網站為:http://jqueryui.com/
jquery-ui-x.xx.x.custom.zip
。裡面目錄結構如下:
1.css,包含與jQuery UI 相關的CSS 檔案;
2.js,包含jQuery UI 相關的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 的皮膚,有各種色調的模版提供使用。對於程式設計師,可以使用
最和網站符合的模版;對於美工,也提供了沒有任何樣式的模版基於設計。
這裡可以:http://jqueryui.com/themeroller/  查看已有模版樣式。

三.  簡單引入
由於jQuery UI 不同元件的引入都有類似的特點和語法,所以這裡只介紹兩種元件
的引入方式,這樣可以以此類推其他組件的引入方式。
button 按鈕

//将button 按钮设置成UI 
$('#button').button(); 

dialog 對話框

//将div 设置成dialog 对话框 
$('#dialog ').click(function () { 
 
  $("#dialog ").dialog(); 
 
}); 

這樣的形式,可以得知,jQuery UI的引入都是這樣的  元件名稱() 方法的形式引入。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn