這篇文章主要講解了“如何使用jQuery UI庫開發(fā)Web界面”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“如何使用jQuery UI庫開發(fā)Web界面”吧!
創(chuàng)新互聯(lián)于2013年成立,先為盈江等服務(wù)建站,盈江等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為盈江企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
一.jQuery UI
jQuery UI 是以jQuery 為基礎(chǔ)的開源JavaScript 網(wǎng)頁用戶界面代碼庫。包
含底層用戶交互、動(dòng)畫、特效和可更換主題的可視控件。我們可以直接用它來構(gòu)建具有很
好交互性的web 應(yīng)用程序。
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 功能的索引頁。
二.CSS 主題
CSS 主題就是jQuery UI 的皮膚,有各種色調(diào)的模版提供使用。對于程序員,可以使用
最和網(wǎng)站符合的模版;對于美工,也提供了沒有任何樣式的模版基于設(shè)計(jì)。
三. 簡單引入
由于jQuery UI 不同組件的引入都有類似的特點(diǎn)和語法,所以這里只介紹兩種組件
的引入方式,這樣可以以此類推其他組件的引入方式。
button 按鈕
//將button 按鈕設(shè)置成UI $('#button').button();
dialog 對話框
//將div 設(shè)置成dialog 對話框 $('#dialog ').click(function () { $("#dialog ").dialog(); });
這樣的形式,可以得知,jQuery UI的引入都是這樣的 組件名() 方法的形式引入。
感謝各位的閱讀,以上就是“如何使用jQuery UI庫開發(fā)Web界面”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對如何使用jQuery UI庫開發(fā)Web界面這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!