基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI基礎(chǔ)_第1頁
基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI基礎(chǔ)_第2頁
基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI基礎(chǔ)_第3頁
基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI基礎(chǔ)_第4頁
基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI基礎(chǔ)_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

jQuery?UI基礎(chǔ)7.1jQueryUI簡介7.2下載jQueryUI7.3jQueryUI項目文件7.4jQueryUI預(yù)覽7.5在HTML頁面中應(yīng)該引入的文件單元總結(jié)

7.1jQueryUI簡介

jQueryUI實際上是jQuery插件，專指由jQuery官方維護的UI方向的插件。它是附屬于jQuery的一個用戶界面庫，包含了小組件(Widget)、特效、動畫和交互功能。

jQueryUI庫中的小組件都是可主題化的，“ThemeRoller”是一個WebApp，為jQueryUI設(shè)計和下載自定義主題提供了直觀的界面，它可以簡化創(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能夠被大眾所認可，是因為它具有許多的優(yōu)勢：

?簡單易用：繼承了jQuery簡易使用的特性，提供高度抽象的接口，可短期改善網(wǎng)站易用性。

?開源免費：采用MIT和GPL雙協(xié)議授權(quán)，可輕松滿足自由產(chǎn)品至企業(yè)產(chǎn)品的各種授權(quán)需求。

?廣泛兼容：兼容各主流桌面瀏覽器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+等低版本瀏覽器。

?輕便快捷：組件間相對獨立，可按需加載，避免浪費帶寬拖慢網(wǎng)頁打開速度。

?標(biāo)準(zhǔn)先進：支持WAI-ARIA，通過標(biāo)準(zhǔn)XHTML代碼提供漸進增強，保證低端環(huán)境可訪問性。

?美觀多變：提供近20種預(yù)設(shè)主題，并可自定義多達60項可配置樣式規(guī)則，提供24種背景紋理選擇。

?開放公開：從結(jié)構(gòu)規(guī)劃到代碼編寫全程開放，文檔、代碼、討論，人人均可參與。

?強力支持：Google為發(fā)布代碼提供CDN內(nèi)容分發(fā)網(wǎng)絡(luò)支持。

?完整漢化：開發(fā)包內(nèi)置包含中文在內(nèi)的40多種語言包。

7.1.2jQueryUI的不足

jQueryUI的優(yōu)點很多，但也存在以下不足：

?代碼不夠健壯：缺乏全面的測試用例，部分組件Bug較多，不能達到企業(yè)級產(chǎn)品開發(fā)要求。

?構(gòu)架規(guī)劃不足：組件間API缺乏協(xié)調(diào)，缺乏與之配合的使用幫助。

?控件較少：相對于Dojo、YUI、ExtJS等成熟產(chǎn)品，可用控件較少，無法滿足復(fù)雜界面的功能要求。

?版本間差異較大：相鄰兩個版本可能使用方法相差較大。

7.2下載jQueryUI

打開jQueryUI官網(wǎng)(/)，點擊首頁右側(cè)“Stable”按鈕下載最新穩(wěn)定版的jQueryUI庫，目前最新穩(wěn)定版本為v1.12.1，如圖7-1所示。圖7-1jQueryUI官網(wǎng)首頁

7.2.1創(chuàng)建自定義jQueryUI下載

點擊官網(wǎng)首頁的“CustomDownload”按鈕，或者在瀏覽器地址欄中直接輸入URL：“/download”，進入jQueryUI的下載生成器(DownloadBuilder)頁面，如圖7-2所示。圖7-2jQueryUI下載生成器(DownloadBuilder)頁面

7.2.2創(chuàng)建自定義主題下載

如果想要編輯自己的主題，可以點擊官網(wǎng)首頁的“Themes”按鈕，或者在瀏覽器地址欄中直接輸入URL：“/themeroller/”，進入主題編輯器(ThemeRoller)頁面，如圖7-3所示。圖7-3主題編輯器(ThemeRoller)頁面

1.?ThemeRoller界面

ThemeRoller界面分為左右兩部分，左邊部分上有各種不同的面板，各面板分別是全局字體和圓角半徑設(shè)置、小部件容器樣式、可點擊元素的互動狀態(tài)，及覆蓋和陰影的各種樣式。這些面板允許配置各種CSS屬性，比如字體的尺寸、顏色、粗細，背景顏色和紋理，邊框顏色，文本顏色，圖標(biāo)顏色，圓角半徑，等等。右邊部分是用戶操作面板，可以點擊上方的按鈕切換面板中的內(nèi)容。按鈕分別是“RollYourOwn”(自定義面板)、“Gallery”(主題館)、“Help”(幫助手冊)。

2.?主題館(Gallery)

主題館包含一些預(yù)先設(shè)計的主題可供選擇，可以直接點擊主題下方的“Download”按鈕下載主題，也可以點擊主題下方的“Edit”按鈕，將主題信息加載到RollYouOwn面板方便用戶在該預(yù)設(shè)主題中進行自定義修改。界面如圖7-4所示。

3.?自定義面板(RollYourOwn)

自定義面板包含了主題中所有可以被設(shè)置的內(nèi)容，對主題進行修改后，點擊上方的“Download”按鈕即可下載修改后的主題。界面如圖7-4所示。圖7-4RollYourOwn和Gallery界面

7.3jQueryUI項目文件

下載的jQueryUI是一個壓縮包(.zip)文件，它包含了jQueryUI的源代碼、示例及文檔(英文)。把它解壓縮將得到一個“jquery-ui-1.12.1”的目錄(如圖7-5所示)，該目錄中包含了以下內(nèi)容：

?external文件夾：里面放置的是jQueryUI依賴的jQuery庫。加載的最新版本是v1.12.4，與本書使用的是同一個版本。

?images文件夾：包含了該主題依賴的一些圖片文件。

?兩個記事本(.txt)文件：包含了jQueryUI項目的一些說明和許可。

?若干樣式表(.css)文件：包含了一個默認的jQueryUI主題樣式。

?兩個JavaScript(.js)文件：包含了jQueryUI庫的完整副本。

?“index.html”文件：包含了jQueryUI中的小組件和CSS類的概覽文件。

?“package.json”文件：包含了該項目的一些配置內(nèi)容。圖7-5jQueryUI目錄結(jié)構(gòu)

可以發(fā)現(xiàn)，項目中同名的JavaScript(.js)文件和樣式表(.css)文件都有兩個。以JavaScript文件為例，后綴名包含“.js”和“.min.js”兩種。其中：后綴名為“.js”的文件保留了代碼中的換行、空格、注釋等信息，用于開發(fā)調(diào)試，文件體積較大；后綴名為“.min.js”的文件去掉了代碼中所有的格式，用于發(fā)布，體積較小。樣式表文件同理。

7.4jQueryUI預(yù)覽

用瀏覽器打開jQueryUI默認項目中的“index.html”文件，可以看到一個演示頁面，演示我們在下載生成器中選擇的小部件和主題。此處我們使用的是首頁默認配置，界面如圖7-6所示。圖7-6jQueryUI項目首頁

在這個文件中，我們可以看到j(luò)QueryUI添加的不同功能，包括：

?折疊菜單(accordionmenu)。

?輸入框的自動補全機制(autocompletionmechanism)。

?漂亮的按鈕(button)和復(fù)選框(checkbox)。

?便于頁面展示的選項卡機制(tabmechanism)。

?顯示在頁面最上層的對話框(dialogbox)。

?自定義圖標(biāo)(customicon)。

?滑塊(slider)。

?日歷(datepicker)。

?進度條(progressbar)。

7.5在HTML頁面中應(yīng)該引入的文件

7.5.1創(chuàng)建項目新建一個項目，取名為“jQueryUI”，在項目中添加一個js文件夾，將jQuery庫文件放入，再找到“jquery-ui.min.js”、“jquery-ui.min.css”文件直接粘貼進項目中；將images文件夾也直接粘貼到項目中；最后新建一個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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論