版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
jQuery?UI基礎(chǔ)7.1jQueryUI簡介7.2下載jQueryUI7.3jQueryUI項(xiàng)目文件7.4jQueryUI預(yù)覽7.5在HTML頁面中應(yīng)該引入的文件單元總結(jié)
7.1jQueryUI簡介
jQueryUI實(shí)際上是jQuery插件，專指由jQuery官方維護(hù)的UI方向的插件。它是附屬于jQuery的一個用戶界面庫，包含了小組件(Widget)、特效、動畫和交互功能。
jQueryUI庫中的小組件都是可主題化的，“ThemeRoller”是一個WebApp，為jQueryUI設(shè)計(jì)和下載自定義主題提供了直觀的界面，它可以簡化創(chuàng)建主題的過程，使jQueryUI具有高級外觀的效果。jQueryUI框架還包含了一個非常完備的CSS類的集合，這些CSS類對于創(chuàng)建應(yīng)用程序的主題非常有用。盡管其他插件也可能具有很多與之類似的功能，但jQueryUI具有統(tǒng)一的基礎(chǔ)代碼庫和API、可靠的總體質(zhì)量、靈活的UI元素，這一切使得jQueryUI成為構(gòu)建Web應(yīng)用程序不可或缺的寶庫。
7.1.1jQueryUI的優(yōu)勢
jQueryUI能夠被大眾所認(rèn)可，是因?yàn)樗哂性S多的優(yōu)勢：
?簡單易用：繼承了jQuery簡易使用的特性，提供高度抽象的接口，可短期改善網(wǎng)站易用性。
?開源免費(fèi)：采用MIT和GPL雙協(xié)議授權(quán)，可輕松滿足自由產(chǎn)品至企業(yè)產(chǎn)品的各種授權(quán)需求。
?廣泛兼容：兼容各主流桌面瀏覽器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+等低版本瀏覽器。
?輕便快捷：組件間相對獨(dú)立，可按需加載，避免浪費(fèi)帶寬拖慢網(wǎng)頁打開速度。
?標(biāo)準(zhǔn)先進(jìn)：支持WAI-ARIA，通過標(biāo)準(zhǔn)XHTML代碼提供漸進(jìn)增強(qiáng)，保證低端環(huán)境可訪問性。
?美觀多變：提供近20種預(yù)設(shè)主題，并可自定義多達(dá)60項(xiàng)可配置樣式規(guī)則，提供24種背景紋理選擇。
?開放公開：從結(jié)構(gòu)規(guī)劃到代碼編寫全程開放，文檔、代碼、討論，人人均可參與。
?強(qiáng)力支持：Google為發(fā)布代碼提供CDN內(nèi)容分發(fā)網(wǎng)絡(luò)支持。
?完整漢化：開發(fā)包內(nèi)置包含中文在內(nèi)的40多種語言包。
7.1.2jQueryUI的不足
jQueryUI的優(yōu)點(diǎn)很多，但也存在以下不足：
?代碼不夠健壯：缺乏全面的測試用例，部分組件Bug較多，不能達(dá)到企業(yè)級產(chǎn)品開發(fā)要求。
?構(gòu)架規(guī)劃不足：組件間API缺乏協(xié)調(diào)，缺乏與之配合的使用幫助。
?控件較少：相對于Dojo、YUI、ExtJS等成熟產(chǎn)品，可用控件較少，無法滿足復(fù)雜界面的功能要求。
?版本間差異較大：相鄰兩個版本可能使用方法相差較大。
7.2下載jQueryUI
打開jQueryUI官網(wǎng)(/)，點(diǎn)擊首頁右側(cè)“Stable”按鈕下載最新穩(wěn)定版的jQueryUI庫，目前最新穩(wěn)定版本為v1.12.1，如圖7-1所示。圖7-1jQueryUI官網(wǎng)首頁
7.2.1創(chuàng)建自定義jQueryUI下載
點(diǎn)擊官網(wǎng)首頁的“CustomDownload”按鈕，或者在瀏覽器地址欄中直接輸入U(xiǎn)RL：“/download”，進(jìn)入jQueryUI的下載生成器(DownloadBuilder)頁面，如圖7-2所示。圖7-2jQueryUI下載生成器(DownloadBuilder)頁面
7.2.2創(chuàng)建自定義主題下載
如果想要編輯自己的主題，可以點(diǎn)擊官網(wǎng)首頁的“Themes”按鈕，或者在瀏覽器地址欄中直接輸入U(xiǎn)RL：“/themeroller/”，進(jìn)入主題編輯器(ThemeRoller)頁面，如圖7-3所示。圖7-3主題編輯器(ThemeRoller)頁面
1.?ThemeRoller界面
ThemeRoller界面分為左右兩部分，左邊部分上有各種不同的面板，各面板分別是全局字體和圓角半徑設(shè)置、小部件容器樣式、可點(diǎn)擊元素的互動狀態(tài)，及覆蓋和陰影的各種樣式。這些面板允許配置各種CSS屬性，比如字體的尺寸、顏色、粗細(xì)，背景顏色和紋理，邊框顏色，文本顏色，圖標(biāo)顏色，圓角半徑，等等。右邊部分是用戶操作面板，可以點(diǎn)擊上方的按鈕切換面板中的內(nèi)容。按鈕分別是“RollYourOwn”(自定義面板)、“Gallery”(主題館)、“Help”(幫助手冊)。
2.?主題館(Gallery)
主題館包含一些預(yù)先設(shè)計(jì)的主題可供選擇，可以直接點(diǎn)擊主題下方的“Download”按鈕下載主題，也可以點(diǎn)擊主題下方的“Edit”按鈕，將主題信息加載到RollYouOwn面板方便用戶在該預(yù)設(shè)主題中進(jìn)行自定義修改。界面如圖7-4所示。
3.?自定義面板(RollYourOwn)
自定義面板包含了主題中所有可以被設(shè)置的內(nèi)容，對主題進(jìn)行修改后，點(diǎn)擊上方的“Download”按鈕即可下載修改后的主題。界面如圖7-4所示。圖7-4RollYourOwn和Gallery界面
7.3jQueryUI項(xiàng)目文件
下載的jQueryUI是一個壓縮包(.zip)文件，它包含了jQueryUI的源代碼、示例及文檔(英文)。把它解壓縮將得到一個“jquery-ui-1.12.1”的目錄(如圖7-5所示)，該目錄中包含了以下內(nèi)容：
?external文件夾：里面放置的是jQueryUI依賴的jQuery庫。加載的最新版本是v1.12.4，與本書使用的是同一個版本。
?images文件夾：包含了該主題依賴的一些圖片文件。
?兩個記事本(.txt)文件：包含了jQueryUI項(xiàng)目的一些說明和許可。
?若干樣式表(.css)文件：包含了一個默認(rèn)的jQueryUI主題樣式。
?兩個JavaScript(.js)文件：包含了jQueryUI庫的完整副本。
?“index.html”文件：包含了jQueryUI中的小組件和CSS類的概覽文件。
?“package.json”文件：包含了該項(xiàng)目的一些配置內(nèi)容。圖7-5jQueryUI目錄結(jié)構(gòu)
可以發(fā)現(xiàn)，項(xiàng)目中同名的JavaScript(.js)文件和樣式表(.css)文件都有兩個。以JavaScript文件為例，后綴名包含“.js”和“.min.js”兩種。其中：后綴名為“.js”的文件保留了代碼中的換行、空格、注釋等信息，用于開發(fā)調(diào)試，文件體積較大；后綴名為“.min.js”的文件去掉了代碼中所有的格式，用于發(fā)布，體積較小。樣式表文件同理。
7.4jQueryUI預(yù)覽
用瀏覽器打開jQueryUI默認(rèn)項(xiàng)目中的“index.html”文件，可以看到一個演示頁面，演示我們在下載生成器中選擇的小部件和主題。此處我們使用的是首頁默認(rèn)配置，界面如圖7-6所示。圖7-6jQueryUI項(xiàng)目首頁
在這個文件中，我們可以看到j(luò)QueryUI添加的不同功能，包括：
?折疊菜單(accordionmenu)。
?輸入框的自動補(bǔ)全機(jī)制(autocompletionmechanism)。
?漂亮的按鈕(button)和復(fù)選框(checkbox)。
?便于頁面展示的選項(xiàng)卡機(jī)制(tabmechanism)。
?顯示在頁面最上層的對話框(dialogbox)。
?自定義圖標(biāo)(customicon)。
?滑塊(slider)。
?日歷(datepicker)。
?進(jìn)度條(progressbar)。
7.5在HTML頁面中應(yīng)該引入的文件
7.5.1創(chuàng)建項(xiàng)目新建一個項(xiàng)目，取名為“jQueryUI”，在項(xiàng)目中添加一個js文件夾，將jQuery庫文件放入，再找到“jquery-ui.min.js”、“jquery-ui.min.css”文件直接粘貼進(jìn)項(xiàng)目中；將images文件夾也直接粘貼到項(xiàng)目中；最后新建一個index.html文件，用于編寫代碼。目錄結(jié)構(gòu)如圖7-7所示。圖7-7目錄結(jié)構(gòu)
7.5.2編寫代碼
打開index.html文件，首先添加css和js的引用，代碼如下：
然后在頁面中放入一個超鏈接(a元素)：
<body>
<aid="mybtn"href="#">超鏈接</a>
</body>
最后添加jQuery代碼：
<script>
$(document).ready(function(){
$('#
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 盾構(gòu)機(jī)采購合同范本
- Unit 1 Hello!（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年冀教版（三起）（2024）英語三年級上冊
- 投資地皮合同范本
- 2《走月亮》教學(xué)設(shè)計(jì)-2024-2025學(xué)年語文四年級上冊統(tǒng)編版
- 21古詩詞三首《山居秋暝》（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年統(tǒng)編版語文五年級上冊
- 3《蜀道難》《蜀相》教學(xué)設(shè)計(jì) 2023-2024學(xué)年統(tǒng)編版高中語文選擇性必修下冊
- 清油罐合同范本
- 20肥皂泡教學(xué)設(shè)計(jì)-2023-2024學(xué)年三年級下冊語文統(tǒng)編版
- 貨物抵賬合同范本
- 4公民的基本權(quán)利和義務(wù) 第三課時《國家尊重和保障人權(quán)》教學(xué)設(shè)計(jì)-2024-2025學(xué)年道德與法治六年級上冊統(tǒng)編版
- 預(yù)防深靜脈血栓VTE持續(xù)改進(jìn)QCC品管圈PDCA案例3例
- 水環(huán)境綜合治理服務(wù)方案（技術(shù)標(biāo)）
- 【原創(chuàng)】頭腦特工隊(duì)開的那些心理學(xué)腦洞
- 美甲藝術(shù)全套教學(xué)課件
- 中國古代餐具
- 施工日志模板
- Agilent7820A氣相色譜儀操作規(guī)程知識講解
- 400字作文稿紙(方格)A4打印模板
- 不領(lǐng)證的夫妻離婚協(xié)議書
- 鋁型材企業(yè)組織架構(gòu)及部門職能
- 華為BEM戰(zhàn)略解碼體系完整版
評論
0/150
提交評論