jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第8單元 使用jQuery UI 插件_第1頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第8單元 使用jQuery UI 插件_第2頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第8單元 使用jQuery UI 插件_第3頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第8單元 使用jQuery UI 插件_第4頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程課件 第8單元 使用jQuery UI 插件_第5頁(yè)
已閱讀5頁(yè)，還剩54頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第8單元使用jQueryUI插件了解jQueryUI插件的工作原理。了解jQueryUI常用插件的使用。了解jQueryUI常用特效的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練使用jQueryUI插件。能夠熟練使用jQueryUI特效。掌握插件的應(yīng)用技巧，設(shè)計(jì)出富有吸引力的用戶界面，增強(qiáng)創(chuàng)新意識(shí)與團(tuán)隊(duì)協(xié)作能力。目錄導(dǎo)航8.1初識(shí)jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4項(xiàng)目實(shí)戰(zhàn)：使用jQuery實(shí)現(xiàn)許愿墻8.1.1jQueryUI概述（2）開源免費(fèi)。輕松滿足自由產(chǎn)品和企業(yè)產(chǎn)品的各種授權(quán)需求。（1）簡(jiǎn)單易用。繼承jQuery簡(jiǎn)易使用特性，提供高度抽象接口，短期改善網(wǎng)站易用性。（3）廣泛兼容。兼容各主流桌面瀏覽器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+。（4）輕便快捷。組件間相對(duì)獨(dú)立，可按需加載，避免浪費(fèi)帶寬、放慢網(wǎng)頁(yè)打開速度。（6）開放公開。從結(jié)構(gòu)規(guī)劃到代碼編寫全程開放，人人均可參與文檔、代碼的編寫與討論。（5）美觀多變。提供近20種預(yù)設(shè)主題，并可自定義多達(dá)60項(xiàng)可配置樣式規(guī)則，提供24種背景紋理供選擇。（7）強(qiáng)力支持。提供CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)服務(wù)）支持。（8）完整漢化。開發(fā)包內(nèi)置包含中文在內(nèi)的40多種語(yǔ)言包。8.1.2jQueryUI的下載打開jQueryUI主頁(yè)面01選擇下載版本02選擇主題038.1.3jQueryUI的使用jQueryUI下載完成后，會(huì)獲得一個(gè)包含已選組件的ZIP文件（jquery-ui-1.13.2.custom.zip），解壓該文件，得到j(luò)QueryUI包含的文件。jQueryUI包含的文件8.1.3jQueryUI的使用在HTML網(wǎng)頁(yè)中使用jQueryUI插件時(shí)，需要將jQueryUI包含的所有文件及文件夾（即解壓后的jquery-ui-1.13.2.custom文件夾）復(fù)制到HTML網(wǎng)頁(yè)所在的文件夾下，然后在HTML網(wǎng)頁(yè)的<head>標(biāo)記中添加jquery-ui.css文件、jquery-ui.js文件及external/jquery文件夾下jquery.js文件的引用。代碼如下：<linkrel="stylesheet"href="jquery-ui-1.13.2.custom/jquery-ui.css"/><scriptsrc="jquery-ui-1.13.2.custom/jquery-ui.js"></script><scriptsrc="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>一旦引用了以上3個(gè)文件，開發(fā)人員即可向HTML網(wǎng)頁(yè)中添加jQueryUI插件。例如要向HTML網(wǎng)頁(yè)中添加一個(gè)滑塊插件，可使用如下代碼實(shí)現(xiàn)。HTML代碼如下：<divid="slider"></div>添加滑塊插件的JavaScript代碼如下：8.1.4jQueryUI插件的工作原理01OPTION安裝為了跟蹤插件的狀態(tài)，首先介紹插件的生命周期。當(dāng)插件安裝時(shí)，插件的生命周期開啟，只需要在一個(gè)或多個(gè)元素上調(diào)用插件，即安裝了插件。例如以下代碼開啟了progressbar插件的生命周期：$("#elem").progressbar();此外在安裝時(shí)，jQueryUI插件還可以傳遞一組選項(xiàng)，這樣即可重寫默認(rèn)選項(xiàng)，代碼如下：$("#elem").progressbar({value:20});8.1.4jQueryUI插件的工作原理02OPTION方法option方法。option方法主要用來(lái)在插件初始化后修改選項(xiàng)。例如通過(guò)調(diào)用option方法修改進(jìn)度條插件的value選項(xiàng)為30，代碼如下：$("#elem").progressbar("option","value",30);disable方法。disable方法用來(lái)禁用插件，它等同于將disabled選項(xiàng)設(shè)置為true。例如以下代碼用來(lái)將進(jìn)度條插件設(shè)置為禁用狀態(tài)：$("#elem").progressbar("disable");enable方法。enable方法用來(lái)啟用插件，它等同于將disabled選項(xiàng)設(shè)置為false。例如以下代碼用來(lái)將進(jìn)度條插件設(shè)置為啟用狀態(tài)：$("#elem").progressbar("enable");destroy方法。destroy方法用來(lái)銷毀插件，使插件返回到最初的標(biāo)記，這意味著插件生命周期的終止。例如以下代碼用來(lái)銷毀進(jìn)度條插件：$("#elem").progressbar("destroy");widget方法。widget方法用來(lái)生成包裝器元素，或與原始元素?cái)嚅_連接的元素。例如在以下代碼中，widget方法將返回元素，由于在進(jìn)度條插件中，沒(méi)有生成的包裝器元素，因此widget方法返回與原始元素?cái)嚅_連接的元素。$("#elem").progressbar("widget");8.1.4jQueryUI插件的工作原理03OPTION事件所有的jQueryUI插件都有與它們各種行為相關(guān)的事件，用于在狀態(tài)改變時(shí)通知用戶。對(duì)于大多數(shù)插件，當(dāng)事件被觸發(fā)時(shí)，事件名稱以插件名稱為前綴。例如，可以綁定進(jìn)度條插件的change事件，一旦進(jìn)度條的值發(fā)生變化就觸發(fā)該事件。代碼如下：$("#elem").bind("progressbarchange",function(){ alert("進(jìn)度條的值發(fā)生了改變!");});每個(gè)事件都有一個(gè)相對(duì)應(yīng)的回調(diào)作為選項(xiàng)進(jìn)行呈現(xiàn)，開發(fā)人員可以使用進(jìn)度條插件的change選項(xiàng)進(jìn)行回調(diào)，這等同于綁定progressbarchange事件。代碼如下：$("#elem").progressbar({ change:function(){ alert("進(jìn)度條的值發(fā)生了改變!"); }});8.1.5jQueryUI中的插件折疊面板（Accordion）自動(dòng)完成（Autocomplete）按鈕（Button）日期選擇器（Datepicker）對(duì)話框（Dialog）、菜單（Menu）選擇菜單（Selectmenu）進(jìn)度條（Progressbar）滑塊（Slider）旋轉(zhuǎn)器（Spinner）標(biāo)簽頁(yè)（Tabs）工具提示框（Tooltip）鼠標(biāo)（Mouse）復(fù)選框單選按鈕（Checkboxradio）組件控制組（Controlgroup）目錄導(dǎo)航8.1初識(shí)jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4項(xiàng)目實(shí)戰(zhàn)：使用jQuery實(shí)現(xiàn)許愿墻8.2.1折疊面板的使用折疊面板標(biāo)記需要包含至少一對(duì)標(biāo)題和內(nèi)容面板，例如折疊面板標(biāo)記可以包含一系列的標(biāo)題（<h3>標(biāo)記）和內(nèi)容面板<div>。代碼如下：<divid="accordion"> <h3>Firstheader</h3> <div>Firstcontentpanel</div> <h3>Secondheader</h3> <div>Secondcontentpanel</div></div>在使用折疊面板時(shí)，如果焦點(diǎn)在標(biāo)題（header）上，則如下鍵盤命令可用。Up/Left：移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)題上。如果當(dāng)前焦點(diǎn)在第一個(gè)標(biāo)題上，則移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)題上。Down/Right：移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)題上。如果當(dāng)前焦點(diǎn)在最后一個(gè)標(biāo)題上，則移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)題上。Home：移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)題上。End：移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)題上。Space/Enter：激活與獲得焦點(diǎn)的標(biāo)題相關(guān)的內(nèi)容面板（panel）。當(dāng)焦點(diǎn)在內(nèi)容面板中時(shí)，以下鍵盤命令可用。Ctrl+Up：移動(dòng)焦點(diǎn)到相關(guān)的標(biāo)題上。8.2.1折疊面板的使用折疊面板的常用選項(xiàng)及說(shuō)明如表所示。選項(xiàng)類型說(shuō)明activeBoolean或Integer當(dāng)前展開哪一個(gè)內(nèi)容面板animateBoolean或Number或String或Object是否使用動(dòng)畫改變內(nèi)容面板，且如何使用動(dòng)畫改變內(nèi)容面板classesObject指定要添加到小部件元素的其他類collapsibleBoolean所有邏輯部分的內(nèi)容是否都可以馬上折疊，允許折疊激活的部分disabledBoolean如果設(shè)置為true，則禁用該折疊面板e(cuò)ventString折疊面板頭部會(huì)做出反應(yīng)的事件，用以激活相關(guān)的內(nèi)容面板。可以指定多個(gè)事件，且事件用空格間隔headerSelector標(biāo)題元素的選擇器，通過(guò)主要折疊面板元素上的.find()方法進(jìn)行應(yīng)用。內(nèi)容面板必須是緊接在與其相關(guān)的標(biāo)題后的同級(jí)元素heightStyleString控制折疊面板和每個(gè)內(nèi)容面板的高度iconsObject標(biāo)題要使用的圖標(biāo)（Icons），與jQueryUICSS框架提供的圖標(biāo)匹配。設(shè)置為false，則不顯示圖標(biāo)8.2.1折疊面板的使用折疊面板的常用方法及說(shuō)明如表所示。方法說(shuō)明destroy()完全移除折疊面板功能。這會(huì)把元素返回到它的預(yù)初始化狀態(tài)disable()禁用折疊面板e(cuò)nable()啟用折疊面板instance()在插件加載后可以安全地調(diào)用任何元素option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個(gè)包含鍵值對(duì)的對(duì)象，鍵值對(duì)表示當(dāng)前折疊面板選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的折疊面板選項(xiàng)的值option(options)為折疊面板設(shè)置一個(gè)或多個(gè)選項(xiàng)refresh()處理任何在DOM中直接添加或移除的標(biāo)題和內(nèi)容面板，并重新計(jì)算折疊面板的高度widget()返回一個(gè)包含折疊面板的jQuery對(duì)象8.2.1折疊面板的使用折疊面板的常用事件及說(shuō)明如表所示。事件說(shuō)明activate(event,ui)內(nèi)容面板被激活后觸發(fā)（在動(dòng)畫完成之后）。如果折疊面板之前為折疊狀態(tài)，則ui.oldHeader和ui.oldPanel將是空的jQuery對(duì)象。如果折疊面板正在折疊，則ui.newHeader和ui.newPanel將是空的jQuery對(duì)象beforeActivate(event,ui)內(nèi)容面板被激活前直接觸發(fā)?？梢匀∠?，以防止內(nèi)容面板被激活。如果折疊面板當(dāng)前為折疊狀態(tài)，則ui.oldHeader和ui.oldPanel將是空的jQuery對(duì)象。如果折疊面板正在折疊，則ui.newHeader和ui.newPanel將是空的jQuery對(duì)象create(event,ui)當(dāng)創(chuàng)建折疊面板時(shí)觸發(fā)。如果折疊面板為折疊狀態(tài)，則ui.header和ui.panel將是空的jQuery對(duì)象8.2.1折疊面板的使用【例8-1】實(shí)現(xiàn)一個(gè)折疊面板，默認(rèn)第1個(gè)內(nèi)容面板為展開狀態(tài)。（1）新建一個(gè)index.html文件，將其放到8-1文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-1文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁(yè)中顯示折疊面板的功能：運(yùn)行結(jié)果8.2.2自動(dòng)完成插件的使用自動(dòng)完成（Autocomplete）插件用來(lái)根據(jù)用戶輸入的值對(duì)數(shù)據(jù)進(jìn)行搜索和過(guò)濾，讓用戶從預(yù)設(shè)值列表中快速找到并選擇需要的條目。自動(dòng)完成插件類似百度的搜索框，當(dāng)用戶在搜索框中輸入值時(shí)，自動(dòng)完成插件會(huì)提供相應(yīng)的建議。ui-autocomplete：用于顯示匹配用戶的菜單（menu）。ui-autocomplete-input：自動(dòng)完成插件（AutocompleteWidget）實(shí)例化的<input>元素。自動(dòng)完成插件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用自動(dòng)完成插件指定的樣式，則可以使用如下CSSclass名稱。8.2.2自動(dòng)完成插件的使用自動(dòng)完成插件的常用選項(xiàng)及說(shuō)明如表所示。選項(xiàng)類型說(shuō)明appendToSelector菜單應(yīng)該被附加到哪一個(gè)元素。當(dāng)該選項(xiàng)值為null時(shí)，輸入域的父元素將查找?guī)в蠧SSclass名稱為ui-front的元素。如果找到帶有CSSclass名稱為ui-front的元素，菜單將被附加到該元素；如果未找到帶有CSSclass名稱為ui-front的元素，無(wú)論選項(xiàng)值為多少，菜單都將被附加到bodyautoFocusBoolean如果設(shè)置為true，當(dāng)菜單顯示時(shí)第1個(gè)條目將自動(dòng)獲得焦點(diǎn)delayInteger按鍵和執(zhí)行搜索之間的延遲，以毫秒計(jì)。對(duì)于本地?cái)?shù)據(jù)，采用零延遲是有意義的（更具響應(yīng)性），但對(duì)于遠(yuǎn)程數(shù)據(jù)采用零延遲會(huì)產(chǎn)生大量的負(fù)荷，同時(shí)降低響應(yīng)性disabledBoolean如果設(shè)置為true，則禁用該自動(dòng)完成插件minLengthInteger執(zhí)行搜索前用戶必須輸入的最小字符數(shù)。對(duì)于僅匹配幾項(xiàng)條目的本地?cái)?shù)據(jù)，通常設(shè)置為零。但是當(dāng)單個(gè)字符搜索會(huì)匹配幾千項(xiàng)條目時(shí)，設(shè)置為高數(shù)值是很有必要的positionObject標(biāo)識(shí)建議菜單的位置與相關(guān)的input元素。of選項(xiàng)默認(rèn)為input元素，可以指定另一個(gè)定位元素sourceArray或String或Function(Objectrequest,Functionresponse(Objectdata))定義要使用的數(shù)據(jù)，必須指定該選項(xiàng)8.2.2自動(dòng)完成插件的使用自動(dòng)完成插件的常用方法及說(shuō)明如表所示。方法說(shuō)明close()關(guān)閉自動(dòng)完成插件菜單。當(dāng)與search()方法結(jié)合使用時(shí)，可用于關(guān)閉打開的菜單destroy()完全移除自動(dòng)完成插件功能。這會(huì)把元素返回到它的預(yù)初始化狀態(tài)disable()禁用自動(dòng)完成插件enable()啟用自動(dòng)完成插件option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個(gè)包含鍵值對(duì)的對(duì)象，鍵值對(duì)表示當(dāng)前自動(dòng)完成插件選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的自動(dòng)完成插件選項(xiàng)的值option(options)為自動(dòng)完成插件設(shè)置一個(gè)或多個(gè)選項(xiàng)

search([value])觸發(fā)search事件，如果該事件未被取消則調(diào)用數(shù)據(jù)源。當(dāng)不帶參數(shù)調(diào)用該方法時(shí)，則使用當(dāng)前輸入的值?？蓭б粋€(gè)空字符串和minLength:0參數(shù)對(duì)方法進(jìn)行調(diào)用，來(lái)顯示所有條目widget()返回一個(gè)包含菜單元素的jQuery對(duì)象，雖然其中的菜單項(xiàng)不斷地被創(chuàng)建和銷毀。菜單元素本身會(huì)在初始化時(shí)創(chuàng)建，并不斷地重復(fù)使用8.2.2自動(dòng)完成插件的使用自動(dòng)完成的常用事件及說(shuō)明如表所示。事件說(shuō)明change(event,ui)如果輸入域的值改變，則觸發(fā)該事件close(event,ui)當(dāng)菜單隱藏時(shí)觸發(fā)。不是每一個(gè)close事件都伴隨著change事件create(event,ui)當(dāng)創(chuàng)建自動(dòng)完成插件時(shí)觸發(fā)focus(event,ui)當(dāng)焦點(diǎn)移動(dòng)到一個(gè)條目上（未選擇）時(shí)觸發(fā)。默認(rèn)的動(dòng)作是把文本域中的值替換為獲得焦點(diǎn)的條目的值，即使該事件是通過(guò)鍵盤交互觸發(fā)的。取消該事件會(huì)阻止值被更新，但不會(huì)阻止選項(xiàng)獲得焦點(diǎn)open(event,ui)當(dāng)打開建議菜單或者更新建議菜單時(shí)觸發(fā)response(event,ui)在搜索完成后菜單顯示前觸發(fā)。該事件用于建議數(shù)據(jù)的本地操作，其中自定義的source選項(xiàng)回調(diào)不是必需的。該事件總是在搜索完成后被觸發(fā)，如果搜索無(wú)結(jié)果或者禁用了自動(dòng)完成插件，導(dǎo)致菜單未顯示，該事件一樣會(huì)被觸發(fā)search(event,ui)在搜索執(zhí)行前滿足minLength和delay后觸發(fā)。如果取消該事件，則不會(huì)提交請(qǐng)求，也不會(huì)提供建議條目select(event,ui)當(dāng)從菜單中選擇條目時(shí)觸發(fā)。默認(rèn)動(dòng)作是把文本域中的值替換為被選中條目的值。取消該事件會(huì)阻止值被更新，但不會(huì)阻止菜單關(guān)閉8.2.2自動(dòng)完成插件的使用【例8-2】本實(shí)例使用自動(dòng)完成插件實(shí)現(xiàn)根據(jù)用戶輸入，智能顯示查詢列表的功能。如果查詢列表過(guò)長(zhǎng)，可以通過(guò)為自動(dòng)完成插件設(shè)置max-height的值來(lái)防止列表顯示過(guò)長(zhǎng)（1）新建一個(gè)index.html文件，將其放到8-2文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-2文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)根據(jù)用戶輸入智能顯示查詢列表的功能：運(yùn)行結(jié)果8.2.3按鈕的使用Buttonset通過(guò)選擇一個(gè)容器元素（包含單選按鈕）并調(diào)用.buttonset()來(lái)分組。Buttonset也提供了可視化分組，因此當(dāng)單選按鈕需要分組時(shí)可以考慮使用它。按鈕部件（ButtonWidget）使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用按鈕指定的樣式，則可以使用如下CSSclass名稱。ui-button：表示按鈕的DOM元素。該元素會(huì)根據(jù)text和icons選項(xiàng)添加下列CSSclass名稱之一：ui-button-text-only、ui-button-icon-only、ui-button-icons-only、ui-button-texticons。ui-button-icon-primary：用于顯示按鈕主要圖標(biāo)的元素。只有當(dāng)主要圖標(biāo)在icons選項(xiàng)中提供時(shí)才顯示。ui-button-text：在按鈕文本內(nèi)容周圍的容器。ui-button-icon-secondary：用于顯示按鈕次要圖標(biāo)的元素。只有當(dāng)次要圖標(biāo)在icons選項(xiàng)中提供時(shí)才顯示。ui-buttonset：Buttonset的外層容器。8.2.3按鈕的使用按鈕的常用選項(xiàng)及說(shuō)明如表所示。選項(xiàng)類型說(shuō)明disabledBoolean如果設(shè)置為true，則禁用該按鈕iconsObject要顯示的圖標(biāo)，包括帶有文本的圖標(biāo)和不帶文本的圖標(biāo)。默認(rèn)情況下，主要圖標(biāo)顯示在標(biāo)簽文本的左邊，次要圖標(biāo)顯示在標(biāo)簽文本的右邊labelString要顯示在按鈕中的文本內(nèi)容。當(dāng)未指定時(shí)（選項(xiàng)值為null），使用元素的HTML內(nèi)容。如果元素是一個(gè)submit或reset類型的<input>元素，則使用它的value屬性值；如果元素是一個(gè)radio或checkbox類型的<input>元素，則使用相關(guān)<label>元素的HTML內(nèi)容textBoolean是否顯示標(biāo)簽。當(dāng)設(shè)置為false時(shí)不顯示文本，但是此時(shí)必須啟用icons選項(xiàng)，否則text選項(xiàng)將被忽略8.2.3按鈕的使用按鈕的常用方法及說(shuō)明如表所示。方法說(shuō)明destroy()完全移除按鈕功能。這會(huì)把元素返回到它的初始化狀態(tài)disable()禁用按鈕enable()啟用按鈕option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個(gè)包含鍵值對(duì)的對(duì)象，鍵值對(duì)表示當(dāng)前按鈕選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的按鈕選項(xiàng)的值option(options)為按鈕設(shè)置一個(gè)或多個(gè)選項(xiàng)refresh()刷新按鈕的視覺(jué)狀態(tài)。用于在以編程方式改變?cè)氐倪x中狀態(tài)或禁用狀態(tài)后刷新按鈕的視覺(jué)狀態(tài)widget()返回一個(gè)包含按鈕的jQuery對(duì)象按鈕的常用事件及說(shuō)明如表所示。事件說(shuō)明create(event,ui)當(dāng)創(chuàng)建按鈕時(shí)觸發(fā)8.2.3按鈕的使用【例8-3】本實(shí)例分別使用<button>元素和類型為submit的<input>元素制作按鈕。（1）新建一個(gè)index.html文件，將其放到8-3文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-3文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼：運(yùn)行結(jié)果8.2.4日期選擇器的使用日期選擇器（Datepicker）主要用來(lái)從彈出框或在線日歷中選擇一個(gè)日期。使用該插件時(shí)，讀者可以自定義日期的格式和語(yǔ)言，也可以限制可選擇的日期范圍等。日期選擇器的常用方法及說(shuō)明如表所示。方法說(shuō)明$.datepicker.setDefaults(settings)為所有的日期選擇器改變默認(rèn)設(shè)置$.datepicker.formatDate(format,date,settings)格式化日期為一個(gè)指定格式的字符串值$.datepicker.parseDate(format,value,settings)從一個(gè)指定格式的字符串值中提取日期$.datepicker.iso8601Week(date)確定一個(gè)給定的日期在一年中的第幾周：1～53$.datepicker.noWeekends設(shè)置如beforeShowDay()函數(shù)，防止選擇的日期為周末8.2.4日期選擇器的使用【例8-4】本實(shí)例使用日期選擇器選擇日期并將其格式化顯示在文本框中，在選擇日期時(shí)提供兩個(gè)月的日期供選擇，而且在選擇日期時(shí)可以修改年份信息和月份信息。（1）新建一個(gè)index.html文件，將其放到8-4文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-4文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)選擇日期并將其格式化的功能：運(yùn)行結(jié)果日期選擇器的應(yīng)用實(shí)例以指定格式顯示日期8.2.5對(duì)話框的使用對(duì)話框（Dialog）是一個(gè)懸浮窗口，包含一個(gè)標(biāo)題欄和一個(gè)內(nèi)容區(qū)域。對(duì)話框可以移動(dòng)、重新調(diào)整大小，默認(rèn)情況下通過(guò)單擊“×”圖標(biāo)關(guān)閉。對(duì)話框部件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用對(duì)話框指定的樣式，則可以使用如下CSSclass名稱。ui-dialogui-dialog-titlebarui-dialog-titleui-dialog-titlebar-closeui-dialog-contentui-dialog-buttonpaneui-dialog-buttonset8.2.5對(duì)話框的使用【例8-5】本實(shí)例使用對(duì)話框演示創(chuàng)建新用戶的過(guò)程，具體實(shí)現(xiàn)時(shí)在內(nèi)容區(qū)域嵌入<form>標(biāo)記，設(shè)置modal選項(xiàng)值為true，并通過(guò)buttons選項(xiàng)來(lái)指定主要的和次要的用戶動(dòng)作。（1）新建一個(gè)index.html文件，將其放到8-5文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-5文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁(yè)中顯示對(duì)話框的功能：8.2.5對(duì)話框的使用8.2.5對(duì)話框的使用運(yùn)行結(jié)果顯示已有的用戶“創(chuàng)建新用戶”模態(tài)對(duì)話框8.2.6菜單的使用菜單（Menu）可以用任何有效的標(biāo)記創(chuàng)建，只要元素有嚴(yán)格的父子關(guān)系且每個(gè)條目都有一個(gè)錨。最常用的元素是無(wú)序列表（<ul>），例如：<ulid="menu"> <li><ahref="#">菜單1</a></li> <li><ahref="#">菜單2</a></li> <li><ahref="#">菜單3</a> <ul> <li><ahref="#">二級(jí)菜單1</a></li> <li><ahref="#">二級(jí)菜單2</a></li> <li><ahref="#">二級(jí)菜單3</a></li> </ul> </li> <li><ahref="#">菜單4</a></li></ul>菜單部件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式，則可以使用如下CSSclass名稱。ui-menuui-menu-itemui-menu-iconui-menu-divider8.2.6菜單的使用【例8-6】本實(shí)例制作一個(gè)帶有默認(rèn)配置、禁用條目和嵌套菜單的菜單。（1）新建一個(gè)index.html文件，將其放到8-6文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-6文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁(yè)中顯示3級(jí)菜單的功能：運(yùn)行結(jié)果8.2.7進(jìn)度條的使用進(jìn)度條被設(shè)計(jì)用來(lái)顯示進(jìn)度（即當(dāng)前完成百分比），它通過(guò)CSS編碼靈活調(diào)整大小，默認(rèn)會(huì)縮放到適應(yīng)父容器的大小。進(jìn)度條部件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用進(jìn)度條指定的樣式，則可以使用如下CSSclass名稱。ui-progressbar：進(jìn)度條的外層容器。該元素會(huì)為不確定的進(jìn)度條額外添加一個(gè)CSSclass名稱ui-progressbar-indeterminate。ui-progressbar-value：該元素代表進(jìn)度條的填充部分。ui-progressbar-overlay：用于為不確定的進(jìn)度條顯示動(dòng)畫的覆蓋層。8.2.7進(jìn)度條的使用【例8-7】本實(shí)例制作一個(gè)自定義更新的進(jìn)度條。（1）新建一個(gè)index.html文件，將其放到8-7文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-7文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁(yè)中自動(dòng)加載的進(jìn)度條：運(yùn)行結(jié)果8.2.8滑塊的使用滑塊（Slider）主要用來(lái)拖動(dòng)手柄選擇一個(gè)數(shù)值?；镜幕瑝K是水平的，有一個(gè)單一的手柄，可以用鼠標(biāo)或箭頭鍵對(duì)手柄進(jìn)行左右拖動(dòng)?；瑝K部件（SliderWidget）會(huì)在初始化時(shí)創(chuàng)建帶有CSSclass名稱為ui-slider-handle的手柄元素，用戶可以通過(guò)在初始化之前創(chuàng)建并追加元素，同時(shí)向元素添加CSSclass名稱ui-sliderhandle來(lái)指定自定義的手柄元素。它只會(huì)創(chuàng)建匹配value/values長(zhǎng)度所需數(shù)量的手柄元素。滑塊部件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用滑塊指定的樣式，則可以使用如下CSSclass名稱。ui-sliderui-slider-handleui-slider-range8.2.8滑塊的使用【例8-8】本實(shí)例通過(guò)組合3個(gè)滑塊實(shí)現(xiàn)一個(gè)簡(jiǎn)單的RGB（RedGreenBlue，三原色）顏色選擇器（實(shí)例位置：源碼\第8單元\8-8）。（1）新建一個(gè)index.html文件，將其放到8-8文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-8文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)通過(guò)拖動(dòng)滑塊改變RGB顏色選擇器的值，從而改變總體顏色的功能：運(yùn)行結(jié)果8.2.9旋轉(zhuǎn)器的使用旋轉(zhuǎn)器（Spinner）的主要作用是通過(guò)向上或者向下按鈕和箭頭鍵，為輸入值增強(qiáng)文本輸入功能。它允許用戶直接輸入一個(gè)值，或通過(guò)鍵盤、鼠標(biāo)旋轉(zhuǎn)改變一個(gè)已有的值。當(dāng)旋轉(zhuǎn)器與全球化（Globalize）結(jié)合時(shí)，用戶甚至可以旋轉(zhuǎn)顯示不同地區(qū)的貨幣和日期。旋轉(zhuǎn)器使用兩個(gè)按鈕將文本輸入覆蓋為當(dāng)前值的遞增值和遞減值。旋轉(zhuǎn)器增加了按鍵事件，以便用戶可以用鍵盤完成相同的遞增和遞減。旋轉(zhuǎn)器部件（SpinnerWidget）使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用旋轉(zhuǎn)器指定的樣式，則可以使用如下CSSclass名稱。ui-spinnerui-spinner-inputui-spinner-button8.2.9旋轉(zhuǎn)器的使用【例8-9】本實(shí)例制作一個(gè)捐款表格，用戶可以選擇捐款幣種和設(shè)置捐款額，其中設(shè)置捐款額使用旋轉(zhuǎn)器實(shí)現(xiàn)。（1）新建一個(gè)index.html文件，將其放到8-9文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-9文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)通過(guò)旋轉(zhuǎn)器設(shè)置捐款額的功能：運(yùn)行結(jié)果8.2.10標(biāo)簽頁(yè)的使用標(biāo)簽頁(yè)（Tabs）是一種多面板的單內(nèi)容區(qū)，每個(gè)面板與列表中的標(biāo)題相關(guān)，單擊標(biāo)簽頁(yè)可以切換顯示不同邏輯內(nèi)容的顯示/隱藏狀態(tài)。標(biāo)簽頁(yè)有一些必須使用的特定標(biāo)記，以便標(biāo)簽頁(yè)能正常工作，這些特定標(biāo)記分別如下。標(biāo)簽頁(yè)部件使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用標(biāo)簽頁(yè)指定的樣式，則可以使用如下CSSclass名稱。ui-tabsui-tabs-nav導(dǎo)航中激活的列表項(xiàng)會(huì)帶有一個(gè)CSSclass名稱ui-tabs-active標(biāo)簽頁(yè)必須在一個(gè)有序的（<ol>）或無(wú)序的（<ul>）列表中。每個(gè)標(biāo)簽頁(yè)的標(biāo)題必須在一個(gè)列表項(xiàng)（<li>）的內(nèi)部，且必須被一個(gè)帶有href屬性的錨（<a>）包裹。ui-tabs-anchorui-tabs-panel8.2.10標(biāo)簽頁(yè)的使用【例8-10】本實(shí)例制作一個(gè)關(guān)于各種網(wǎng)頁(yè)語(yǔ)言介紹的標(biāo)簽頁(yè)，用戶可以通過(guò)單擊標(biāo)簽頁(yè)來(lái)切換各邏輯內(nèi)容的顯示/隱藏狀態(tài)。此外當(dāng)鼠標(biāo)指針在標(biāo)簽頁(yè)上懸停時(shí)，也可以切換各邏輯內(nèi)容的顯示/隱藏狀態(tài)。（1）新建一個(gè)index.html文件，將其放到8-10文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-10文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)使用標(biāo)簽頁(yè)顯示各種網(wǎng)頁(yè)語(yǔ)言介紹的功能：運(yùn)行結(jié)果8.2.11工具提示框的使用工具提示框默認(rèn)使用一個(gè)漸變的動(dòng)畫來(lái)顯示和隱藏自身，這種外觀與簡(jiǎn)單地切換可見度相比更具靈活性，這一功能可以通過(guò)show和hide選項(xiàng)進(jìn)行定制。工具提示框使用jQueryUICSS框架來(lái)定義外觀樣式。如果需要使用工具提示框指定的樣式，則可以使用如下CSSclass名稱。ui-tooltip：工具提示框的外層容器。ui-tooltip-content：工具提示框的內(nèi)容。8.2.11工具提示框的使用【例8-11】本實(shí)例制作一個(gè)虛擬的視頻播放器，該視頻播放器帶有“喜歡”“添加到”“分享”等常用按鈕，每個(gè)按鈕都帶有一個(gè)自定義樣式的工具提示框。（1）新建一個(gè)index.html文件，將其放到8-11文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-11文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在視頻播放器的“喜歡”“添加到”“分享”等按鈕上顯示自定義樣式的工具提示框功能：運(yùn)行結(jié)果目錄導(dǎo)航8.1初識(shí)jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4項(xiàng)目實(shí)戰(zhàn)：使用jQuery實(shí)現(xiàn)許愿墻8.3.1拖動(dòng)特效的使用【例8-12】使用拖動(dòng)特效實(shí)現(xiàn)將指定元素拖動(dòng)到指定區(qū)域。（1）新建一個(gè)index.html文件，將其放到8-12文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-12文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)拖動(dòng)特效：運(yùn)行結(jié)果8.3.2放置特效的使用【例8-13】使用放置特效實(shí)現(xiàn)將指定元素放置在指定區(qū)域。（1）新建一個(gè)index.html文件，將其放到8-13文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-13文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)放置特效：運(yùn)行結(jié)果8.3.3縮放特效的使用【例8-14】使用縮放特效實(shí)現(xiàn)指定區(qū)域放大縮小效果。（1）新建一個(gè)index.html文件，將其放到8-14文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-14文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)縮放特效：運(yùn)行結(jié)果8.3.4選擇特效的使用【例8-15】使用選擇特效實(shí)現(xiàn)菜單條目選中效果。（1）新建一個(gè)index.html文件，將其放到8-15文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-15文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)選擇特效：運(yùn)行結(jié)果8.3.5排序特效的使用【例8-16】使用排序特效實(shí)現(xiàn)菜單條目的排序效果。（1）新建一個(gè)index.html文件，將其放到8-16文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論