基于新信息技術(shù)的jQuery開(kāi)發(fā)基礎(chǔ)教程課件：jQuery UI常用組件

jQuery?UI常用組件8.1按鈕button8.2選項(xiàng)卡tabs8.3手風(fēng)琴菜單accordionMenus8.4對(duì)話框dialogBoxes8.5日歷datepicke8.6輸入框自動(dòng)補(bǔ)全autocomplete8.7進(jìn)度條progressbar8.8滑塊slider8.9jQueryUI提供的圖標(biāo)單元總結(jié)

8.1按鈕button

8.1.1按鈕的基本使用

jQueryUI提供了button()方法，將HTML元素轉(zhuǎn)換為按鈕，并自動(dòng)管理它們上面的鼠標(biāo)移動(dòng)，所有這些都是由jQueryUI隱式完成的。比如下面的HTML代碼中有多種類型的按鈕，當(dāng)然，一般的頁(yè)面中我們一般不用span元素作為按鈕，此處為了演示button()方法的作用特意把它也加進(jìn)來(lái)。

<aid="mybtn1"href="#">超鏈接</a>

<buttonid="mybtn2">button按鈕</button>

<inputid="mybtn3"type="submit">

<inputid="mybtn4"type="reset">

<spanid="mybtn5">span文本容器</span>

這些HTML元素的原本的樣子大家應(yīng)該非常清楚，接下來(lái)我們對(duì)這些元素使用jQuery代碼：

$(document).ready(function(){

$('#mybtn1,#mybtn2,#mybtn3,#mybtn4,#mybtn5').button();

});

只需對(duì)這些元素應(yīng)用button()方法一個(gè)操作即可實(shí)現(xiàn)上述功能，頁(yè)面效果如圖8-1所示。圖8-1button()方法效果圖

可以看到，所有的元素都被改變成了按鈕的樣子，包括span元素。使用Chrome瀏覽器檢查元素，可以看到HTML代碼已經(jīng)被修改了，如圖8-2所示。如圖8-2頁(yè)面實(shí)際顯示的HTML代碼

如果我們要對(duì)按鈕進(jìn)行樣式修改，可以對(duì)class：ui-button進(jìn)行CSS編碼，代碼如下：

<style>

.ui-button{

background-color:red;

color:white;

font-weight:bold;

}

</style>

此時(shí)，頁(yè)面顯示的元素如圖8-3所示。圖8-3修改CSS代碼后的元素

8.1.2button()方法

上面已經(jīng)介紹了button()方法的基本使用方法，接下來(lái)詳細(xì)介紹button()方法。此方法有兩種形式：

$(selector).button(options);

$(selector).button("action",param);

1.?button(options)方法

button(options)方法聲明HTML元素應(yīng)作為按鈕進(jìn)行管理。options參數(shù)是一個(gè)指定按鈕外觀和行為的對(duì)象。按鈕可以用文本表示，也可以與jQueryUICSS文件中預(yù)定義的圖標(biāo)相關(guān)聯(lián)(在這里，是jquery-ui.min.css文件)，在該文件中包含了一組CSS類，用于訪問(wèn)images目錄中的圖標(biāo)。在這個(gè)CSS文件中，可以看到CSS類定義，例如下面的代碼，是與圖像文件中的圖標(biāo)相關(guān)聯(lián)的CSS類的定義：

.ui-icon-calendar{

background-position:?32px?112px;

}

jQueryUI中可用的圖標(biāo)如圖8-4所示。圖8-4jQueryUI圖標(biāo)

options中的設(shè)置項(xiàng)見(jiàn)表8-1。

比如我們想給按鈕加上小圖標(biāo)，可以將jQuery代碼修改如下：

$(document).ready(function(){

$('#mybtn1').button({icons:{primary:"ui-icon-gear"}});

$('#mybtn2').button({

icons:{primary:"ui-icon-gear",secondary:"ui-icon-triangle-1-s"}

});

$('#mybtn3').button();

$('#mybtn4,#mybtn5').button({icons:{secondary:"ui-icon-triangle-1-s"}});});

頁(yè)面顯示效果如圖8-5所示。圖8-5給按鈕加上小圖標(biāo)

可以看到：

(1)?除了input元素的按鈕外，其他元素的按鈕都可以添加小圖標(biāo)，如“#mybtn4”元素；

(2)?同時(shí)給按鈕添加主、副小圖標(biāo)，則只會(huì)顯示主圖標(biāo)，如“#mybtn2”元素。

2.?button("action",param)方法

此方法允許對(duì)按鈕執(zhí)行方法，例如禁用或更改按鈕文本。方法在第一個(gè)參數(shù)中指定為字符串，例如，“disable”可禁用按鈕；第二個(gè)參數(shù)是需要作為參數(shù)傳遞到方法中的內(nèi)容。表8-2列舉了允許使用的方法及方法的作用。

3.?為按鈕綁定事件

jQueryUI沒(méi)有添加與按鈕相關(guān)聯(lián)的新事件。實(shí)際上，鼠標(biāo)操作的管理與jQuery通常使用的bind()方法所使用的現(xiàn)有事件(click、mouseover等)相對(duì)應(yīng)。因此要為按鈕綁定事件只需直接使用jQuery代碼綁定即可。

8.1.3單選按鈕

jQueryUI使用相同的方法可以讓單選框擁有按鈕的效果。

1.?顯示單選按鈕

使用單選按鈕要比前面的按鈕麻煩一點(diǎn)：必須只使用input元素來(lái)表示單選按鈕，其中與單選按鈕相關(guān)聯(lián)的文本必須放在label元素中，并且label元素必須綁定input單選框。

例如要顯示兩個(gè)單選按鈕來(lái)選擇一個(gè)人的性別，我們編寫HTML代碼如下：

jQuery代碼如下：

頁(yè)面效果如圖8-6所示。圖8-6單選框顯示效果

2.?buttonset()方法

上面的單選按鈕肯定比傳統(tǒng)的單選按鈕更具視覺(jué)上的享受，但最好將它們組織起來(lái)，以顯示它們形成一個(gè)塊。我們可以通過(guò)稍微修改HTML和jQuery代碼來(lái)實(shí)現(xiàn)這一點(diǎn)，更改以粗體顯示：

頁(yè)面顯示效果如圖8-7所示。與前面的代碼的不同之處在于，我們將input元素包裝到div元素中，并應(yīng)用jQueryUI的buttonset()方法使按鈕看起來(lái)像單個(gè)塊。雖然按鈕的顯示不同，但它們的行為保持不變。圖8-7單選框效果

8.1.4復(fù)選按鈕

復(fù)選按鈕的外觀與單選按鈕相同，但可以單獨(dú)選擇和取消選擇每個(gè)復(fù)選框，此處不再贅述，大家可以將單選框代碼修改為復(fù)選框代碼即可看到對(duì)應(yīng)的效果。

8.2選項(xiàng)卡tabs選項(xiàng)卡(Tabs)有一組必須使用的特定標(biāo)記，以便選項(xiàng)卡能正常工作：?選項(xiàng)卡(Tabs)必須在一個(gè)有序的(ol)或無(wú)序的(ul)列表中。

?每個(gè)標(biāo)簽頁(yè)的"title"必須在一個(gè)列表項(xiàng)(li)的內(nèi)部，且必須用一個(gè)帶有href屬性的錨(a)包裹。

?每個(gè)標(biāo)簽頁(yè)面板可以是任意有效的元素，但是它必須帶有一個(gè)id，該id與相關(guān)選項(xiàng)卡的錨中的href相對(duì)應(yīng)。

8.2.1選項(xiàng)卡的基本使用

下面的HTML代碼是選項(xiàng)卡的模板代碼，代碼結(jié)構(gòu)是jQueryUI所提供的，最簡(jiǎn)單的方法是按照模板編寫代碼，要增加或者減少選項(xiàng)卡只需要添加或刪除對(duì)應(yīng)的div和li元素即可。

jQuery代碼如下：

頁(yè)面顯示效果如圖8-8所示。

8.2.2修改選項(xiàng)卡樣式

使用tabs()方法可以極大地改變頁(yè)面中HTML元素的外觀。實(shí)際上，這個(gè)方法會(huì)在jQueryUI內(nèi)部遍歷HTML元素，并向相關(guān)元素(選項(xiàng)卡)添加新的CSS類，以賦予它們適當(dāng)?shù)臉邮健?/p>

比如我們?yōu)樯厦娴拇a添加如下CSS：

頁(yè)面效果將變成如圖8-9所示的樣式。圖8-9選項(xiàng)卡頁(yè)面效果

8.2.3tabs()方法

上面已經(jīng)介紹了tabs()方法的基本使用，接下來(lái)詳細(xì)介紹tabs()方法。此方法有兩種形式：

$(selector).tabs(options)

$(selector).tabs("action",param)

1.?tabs(options)方法

tabs(options)方法聲明HTML元素(及其內(nèi)容)應(yīng)作為選項(xiàng)卡進(jìn)行管理。options參數(shù)是一個(gè)對(duì)象，用于指定與選項(xiàng)卡相關(guān)的外觀和行為。根據(jù)是直接管理選項(xiàng)卡還是管理與選項(xiàng)卡相關(guān)的事件，可以使用不同類型的選項(xiàng)。

options中的設(shè)置項(xiàng)見(jiàn)表8-3，其中的示例以上面的HTML代碼為基礎(chǔ)。

2.?tabs("action",param)方法

與前面的tabs(options)方法不同，該方法用于在創(chuàng)建選項(xiàng)卡后修改選項(xiàng)卡。此方法允許通過(guò)JavaScript程序?qū)x項(xiàng)卡執(zhí)行操作，例如選擇、禁用、添加或刪除選項(xiàng)卡。在第一個(gè)參數(shù)中，操作被指定為字符串(例如，“add”可以添加新的選項(xiàng)卡)，而后面的參數(shù)與此操作的參數(shù)有關(guān)(例如，選項(xiàng)卡的索引等)，如表8-4所示。

3.?綁定事件

除了tabs(options)方法的options中使用的事件方法外，jQueryUI還允許我們使用bind()方法管理這些事件。jQueryUI創(chuàng)建了不同的事件，如表8-5所示。

8.2.4鍵盤交互

當(dāng)焦點(diǎn)在標(biāo)簽頁(yè)上時(shí)，我們可以使用鍵盤按鍵控制選項(xiàng)卡切換：

?UP/LEFT：移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)簽頁(yè)。如果在第一個(gè)標(biāo)簽頁(yè)上，則移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)簽頁(yè)。在一個(gè)短暫的延遲后激活獲得焦點(diǎn)的標(biāo)簽頁(yè)。

?DOWN/RIGHT：移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)簽頁(yè)。如果在最后一個(gè)標(biāo)簽頁(yè)上，則移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)簽頁(yè)。在一個(gè)短暫的延遲后激活獲得焦點(diǎn)的標(biāo)簽頁(yè)。

?HOME：移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)簽頁(yè)。在一個(gè)短暫的延遲后激活獲得焦點(diǎn)的標(biāo)簽頁(yè)。

?END：移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)簽頁(yè)。在一個(gè)短暫的延遲后激活獲得焦點(diǎn)的標(biāo)簽頁(yè)。

?SPACE：激活與獲得焦點(diǎn)的標(biāo)簽頁(yè)相關(guān)的面板。

?ENTER：激活或切換與獲得焦點(diǎn)的標(biāo)簽頁(yè)相關(guān)的面板。

?ALT+PAGEUP：移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)簽頁(yè)，并立即激活。

?ALT+PAGEDOWN：移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)簽頁(yè)，并立即激活。

當(dāng)焦點(diǎn)在面板上時(shí)，我們可以使用鍵盤按鍵控制選項(xiàng)卡切換：

?CTRL+UP：移動(dòng)焦點(diǎn)到相關(guān)的標(biāo)簽頁(yè)。

?ALT+PAGEUP：移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)簽頁(yè)，并立即激活。

?ALT+PAGEDOWN：移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)簽頁(yè)，并立即激活。

8.3手風(fēng)琴菜單accordionMenus

8.3.1手風(fēng)琴菜單的基本使用下面的HTML代碼是手風(fēng)琴菜單的模板代碼，代碼結(jié)構(gòu)是jQueryUI所提供的，最簡(jiǎn)單的方法是按照模板編寫代碼，要增加或者刪除菜單項(xiàng)只需要添加或刪除對(duì)應(yīng)的div和標(biāo)題元素即可。

對(duì)應(yīng)的jQuery代碼如下：

$(document).ready(function(){

$("#accordion").accordion();

});

jQueryUI要求我們?yōu)槊總€(gè)菜單編寫以下內(nèi)容，標(biāo)題元素和div元素一個(gè)接一個(gè)重復(fù)：

?一個(gè)包含整體的全局div元素。

?一個(gè)將成為菜單標(biāo)題的元素：它可以是<h1>，<h2>，…，<h6>，它必須包含一個(gè)超鏈接(a元素)，該鏈接將指示菜單文本(由于未使用href屬性，因此不需要對(duì)其使用href屬性)。

?與內(nèi)容菜單相對(duì)應(yīng)的div元素。

頁(yè)面效果如圖8-10所示。圖8-10手風(fēng)琴菜單效果

8.3.2修改手風(fēng)琴菜單樣式

使用accordion()方法會(huì)顯著改變呈現(xiàn)頁(yè)面中HTML元素的外觀。實(shí)際上，這個(gè)方法掃描HTML并向元素(這里是accordion菜單)添加新的CSS類，以賦予它們適當(dāng)?shù)臉邮健?/p>

我們也可以使用元素的CSS類來(lái)訂制顯示效果。例如，如果我們改變與h3元素相關(guān)聯(lián)的ui-accordion-headerCSS類，我們可以改變菜單標(biāo)題的樣式。類似地，如果我們更改與div元素相關(guān)聯(lián)的ui-accordion-contentCSS類，我們將獲得菜單內(nèi)容的新樣式。

比如下面的CSS代碼：

上面的代碼中，我們?yōu)闃?biāo)題h3添加了一個(gè)3px的紅色邊框，將內(nèi)容區(qū)域的文字大小改為12px，刷新頁(yè)面后頁(yè)面效果如圖8-11所示。圖8-11手風(fēng)琴菜單效果

8.3.3accordion()方法

上面已經(jīng)介紹了accordion()方法的基本使用，接下來(lái)詳細(xì)介紹accordion()方法。此方法語(yǔ)法如下：

$(selector).accordion(options)

$(selector).accordion("aciton"，param)

accordion(options)方法指定HTML元素(及其內(nèi)容)應(yīng)作為accordion菜單進(jìn)行管理。options參數(shù)是一個(gè)指定相關(guān)菜單的外觀和行為的對(duì)象。這些選項(xiàng)涉及菜單的行為、內(nèi)容的高度或與這些菜單相關(guān)的事件。

表8-6描述了用于管理手風(fēng)琴菜單行為的選項(xiàng)。

activate和beforeActivate事件的ui對(duì)象由以下屬性組成：

?oldHeader：與正在關(guān)閉的菜單對(duì)應(yīng)的jQuery類對(duì)象。

?oldContent：與正在關(guān)閉的內(nèi)容菜單相對(duì)應(yīng)的jQuery類對(duì)象。

?newHeader：與正在打開(kāi)的菜單相對(duì)應(yīng)的jQuery類對(duì)象。

?newContent：與正在打開(kāi)的內(nèi)容菜單相對(duì)應(yīng)的jQuery類對(duì)象。

create事件的ui對(duì)象由以下屬性組成：

?header：當(dāng)前正在創(chuàng)建的標(biāo)題。

?panel：當(dāng)前正在創(chuàng)建的內(nèi)容。

表8-7列出了管理菜單事件的選項(xiàng)。

上面的事件選項(xiàng)也可以使用jQuery提供的bind()方法進(jìn)行綁定，對(duì)應(yīng)的事件名稱為：

?accordionactivate事件：對(duì)應(yīng)activate。

?accordionbeforeactivate事件：對(duì)應(yīng)beforeActivate。

?accordioncreate事件：對(duì)應(yīng)create。

8.3.4鍵盤交互

當(dāng)焦點(diǎn)在標(biāo)題(header)上時(shí)，下面的鍵盤命令可用：

?UP/LEFT：移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)題。如果在第一個(gè)標(biāo)題上，則移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)題上。

?DOWN/RIGHT：移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)題。如果在最后一個(gè)標(biāo)題(header)上，則移動(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)的面板(panel)。

當(dāng)焦點(diǎn)在面板中時(shí)，下面的鍵盤命令可用：

?CTRL+UP：移動(dòng)焦點(diǎn)到相關(guān)的標(biāo)題上。

8.4對(duì)話框dialogBoxes

8.4.1對(duì)話框的基本使用圖8-12是jQueryUI為我們提供的對(duì)話框，此對(duì)話框包括文本內(nèi)容和包含關(guān)閉按鈕的標(biāo)題欄。用戶可以移動(dòng)頁(yè)面上的對(duì)話框并調(diào)整其大小。如果內(nèi)容長(zhǎng)度超過(guò)最大高度，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。一個(gè)底部按鈕欄和一個(gè)半透明的模式覆蓋層是常見(jiàn)的添加選項(xiàng)。圖8-12對(duì)話框

要實(shí)現(xiàn)這樣的對(duì)話框，jQueryUI對(duì)我們的頁(yè)面有如下要求：

?一個(gè)body元素下的div元素，它必須要有title屬性指定窗口標(biāo)題。

?在div元素中有包含說(shuō)明文字的元素，用于顯示對(duì)話框的內(nèi)容。

下面的HTML代碼是對(duì)話框模板代碼，代碼結(jié)構(gòu)是jQueryUI提供的，最簡(jiǎn)單的方法是按照模板編寫代碼，可以避免很多不必要的問(wèn)題。

在頁(yè)面中放入如下HTML元素：

使用jQuery代碼對(duì)元素應(yīng)用dialog()方法：

運(yùn)行代碼后就能看到如圖8-12所示的對(duì)話框。

另外，我們可以在頁(yè)面中定義多個(gè)對(duì)話框，比如下面的代碼：

我們定義了兩個(gè)對(duì)話框，打開(kāi)頁(yè)面后顯示如圖8-13所示。圖8-13對(duì)話框頁(yè)面效果

此時(shí)我們只能看到第二個(gè)(后面代碼定義的)對(duì)話框。這是因?yàn)樗袑?duì)話框在出現(xiàn)時(shí)都是默認(rèn)出現(xiàn)在頁(yè)面的正中間，而代碼中后面的HTML元素的顯示級(jí)別要比前面的HTML元素顯示級(jí)別高，所以對(duì)話框2遮擋了對(duì)話框1。我們移動(dòng)(或者關(guān)閉)對(duì)話框2后就能看到對(duì)話框1了。效果如圖8-14所示。圖8-14對(duì)話框頁(yè)面效果

8.4.2修改對(duì)話框樣式

我們可以通過(guò)修改CSS類在默認(rèn)主題上修改對(duì)話框的樣式。例如，如果修改與div元素相關(guān)聯(lián)的ui-dialog-titlebarCSS類，就可以修改窗口標(biāo)題的樣式。類似地，如果我們更改與div元素相關(guān)聯(lián)的ui-dialog-contentCSS類，就可以修改窗口內(nèi)容的樣式。

比如下面的CSS代碼：

上面的代碼將窗口標(biāo)題的背景顏色修改為藍(lán)色，文字修改為白色；將窗口內(nèi)容的文字大小修改為12px，頁(yè)面效果如圖8-15所示。圖8-15對(duì)話框頁(yè)面效果

如果需要修改對(duì)話框的樣式，則可以使用下面的CSS類名稱：

ui-dialog：對(duì)話框的外層容器。

?ui-dialog-titlebar：包含對(duì)話框標(biāo)題和關(guān)閉按鈕的標(biāo)題欄。

??ui-dialog-title：對(duì)話框文本標(biāo)題周圍的容器。

?????ui-dialog-titlebar-close：對(duì)話框的關(guān)閉按鈕。

?ui-dialog-content：對(duì)話框內(nèi)容周圍的容器。這也是部件被實(shí)例化的元素。

?ui-dialog-buttonpane：包含對(duì)話框按鈕的面板。只有當(dāng)設(shè)置了buttons選項(xiàng)時(shí)才呈現(xiàn)。

???????ui-dialog-buttonset：按鈕周圍的容器。

8.4.3dialog()方法

此方法用于設(shè)置一個(gè)對(duì)話框。對(duì)話框?qū)⒃谝粋€(gè)交互覆蓋層中打開(kāi)內(nèi)容。語(yǔ)法如下：

$(selector).dialog(options)

$(selector).dialog("aciton"，param)

對(duì)話框options對(duì)象的選項(xiàng)見(jiàn)表8-8。

dialog()還有一些控制的方法，可以使用JavaScript來(lái)控制dialog窗口。這些方法同樣是使用參數(shù)的方式傳入dialog()方法中?？捎玫姆椒ㄒ?jiàn)表8-9。

與dialog窗口相關(guān)的事件見(jiàn)表8-10。

8.4.4焦點(diǎn)

當(dāng)打開(kāi)一個(gè)對(duì)話框時(shí)，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到滿足下面條件的第一個(gè)項(xiàng)目：

?帶有autofocus屬性的對(duì)話框內(nèi)的第一個(gè)元素。

?對(duì)話框內(nèi)容中的第一個(gè)“:tabbable”元素。

?對(duì)話框按鈕面板內(nèi)的第一個(gè)“:tabbable”元素。

?對(duì)話框的關(guān)閉按鈕。

?對(duì)話框本身。

8.4.5dialog窗口實(shí)例

下面的代碼創(chuàng)建了一個(gè)對(duì)話框，在頁(yè)面打開(kāi)時(shí)不顯示對(duì)話。按鈕分別是打開(kāi)和關(guān)閉對(duì)話框，如果重復(fù)點(diǎn)擊則做出提示。比如對(duì)話框已經(jīng)打開(kāi)時(shí)，再點(diǎn)打開(kāi)按鈕則會(huì)彈出提示“對(duì)話框已打開(kāi)”。

點(diǎn)擊兩次“打開(kāi)”按鈕時(shí)，頁(yè)面效果如圖8-16所示。圖8-16對(duì)話框頁(yè)面效果

8.5日歷datepicker

8.5.1日歷的基本使用jQueryUI提供的日歷(datepicker)有兩種使用方式：(1)?作為日期選擇控件；(2)?作為日歷模塊。

1.?作為日期選擇控件

當(dāng)我們需要用戶在頁(yè)面中輸入時(shí)間時(shí)，我們經(jīng)常會(huì)使用日期選擇控件，HTML5為我們提供了一個(gè)基本的日期選擇控件<inputtype="date">，但它比較難以控制樣式，和當(dāng)前主題不符。jQueryUI也為我們提供了一個(gè)日期選擇控件，我們只需要在頁(yè)面中加入一個(gè)input元素，并使用jQuery代碼給元素應(yīng)用一個(gè)方法(datepicker())即可。比如下面的代碼：

這樣我們就將一個(gè)普通的輸入框改造成了日期輸入控件。頁(yè)面效果如圖8-17和圖8-18所示。圖8-17元素獲得焦點(diǎn)時(shí)圖8-18選擇時(shí)間后

2.?作為日歷模塊

當(dāng)我們需要在頁(yè)面上顯示一個(gè)日歷模塊時(shí)，我們可以把上面代碼中的input元素?fù)Q成一個(gè)div元素或span元素(或其他這類型的元素)，HTML代碼修改如下：

<spanid="datepicker"></span>

頁(yè)面效果如圖8-19所示，日歷將靜態(tài)顯示，用戶無(wú)需單擊輸入字段即可訪問(wèn)它。圖8-19日歷模塊

8.5.2修改日歷樣式

我們可以通過(guò)修改CSS類在默認(rèn)主題上修改日歷的樣式。比如我們可以使用下面的CSS代碼修改日歷的樣式：

.ui-datepicker-header{

font-size:20px;

background-color:orange;

}

.ui-datepicker-calendar{

border:3pxblackdashed;

}

上面的代碼給日歷的頭部添加了橙色的背景色，將日歷的邊框加粗并修改為虛線。效果如圖8-20所示。圖8-20日歷模塊

與日歷相關(guān)的CSS類總結(jié)如下：

?ui-datepicker：日期選擇器的外層容器。如果日期選擇器是內(nèi)聯(lián)的，該元素會(huì)另外帶有一個(gè)ui-datepicker-inlineclass。如果設(shè)置了isRTL選項(xiàng)，該元素會(huì)另外帶有一個(gè)ui-datepicker-rtlclass。．

?■ui-datepicker-header：日期選擇器的頭部容器。

◆ui-datepicker-prev：用于選擇上一月的控件。

◆ui-datepicker-next：用于選擇下一月的控件。

◆ui-datepicker-title：日期選擇器包含月和年的標(biāo)題容器。

●?ui-datepicker-month：月的文本顯示，如果設(shè)置了change

●ui-datepicker-year：年的文本顯示，如果設(shè)置了changeYear選項(xiàng)則顯示<select>元素。

■ui-datepicker-calendar：包含日歷的表格。

◆ui-datepicker-week-end：周末的單元格。

◆ui-datepicker-other-month：發(fā)生在某月但不是當(dāng)前月天數(shù)的單元格。

◆ui-datepicker-unselectable：用戶不可選擇的單元格。

◆ui-datepicker-current-day：已選中日期的單元格。

◆ui-datepicker-today：當(dāng)天日期的單元格。

■ui-datepicker-buttonpane：當(dāng)設(shè)置showButtonPanel選項(xiàng)時(shí)使用按鈕面板(buttonpane)。

◆ui-datepicker-current：用于選擇當(dāng)天日期的按鈕。

如果“numberOfMonths”選項(xiàng)用于顯示多個(gè)月份，則會(huì)使用一些額外的類：

?ui-datepicker-multi：一個(gè)多月份日期選擇器的最外層容器。該元素會(huì)根據(jù)要顯示的月份個(gè)數(shù)另外帶有ui-datepicker-multi-2、ui-datepicker-multi-3或ui-datepicker-multi-4class名稱。

■ui-datepicker-group：分組內(nèi)單獨(dú)的選擇器。該元素會(huì)根據(jù)它在分組中的位置另外帶有ui-datepicker-group-first、ui-datepicker-group-middle或ui-datepicker-group-lastclass名稱。

8.5.3datepicker()方法

日歷方法有兩種形式：

$(selector).datepicker(options)

$(selector).datepicker("aciton"，param)

options是以對(duì)象鍵值對(duì)的形式傳參，每個(gè)鍵值對(duì)表示一個(gè)選項(xiàng)；action是操作對(duì)話框方法的字符串，param則是options的某個(gè)選項(xiàng)。

1.?日期格式設(shè)置

表8-11中列舉了datepicker()方法對(duì)日期格式設(shè)置的屬性，表8-12中列舉了日期格式化代碼。

比如我們可以使用jQuery代碼對(duì)日歷做如下設(shè)置：

頁(yè)面顯示效果及屬性對(duì)應(yīng)的位置如圖8-21所示。圖8-21日歷設(shè)置后效果

2.?日歷外觀設(shè)置

表8-13列出了日歷外觀設(shè)置選項(xiàng)。

比如使用如下jQuery代碼對(duì)日歷進(jìn)行設(shè)置：

頁(yè)面顯示效果如圖8-22所示。圖8-22日歷設(shè)置后效果

3.?日期選擇設(shè)置

我們還可以對(duì)日歷能夠選擇的日期進(jìn)行設(shè)置，表8-14列出了相關(guān)設(shè)置選項(xiàng)。

4.?日歷的動(dòng)畫效果

表8-15列舉了設(shè)置日歷動(dòng)畫效果的選項(xiàng)。

5.?日歷的事件選項(xiàng)

表8-16列舉了日歷的事件選項(xiàng)。

比如禁用每個(gè)月的1號(hào)，可以使用下面的jQuery代碼：

頁(yè)面效果如圖8-23所示。圖8-23日歷設(shè)置后效果

6.?日歷的操作選項(xiàng)

表8-17中列出了日歷的操作方法。

8.6輸入框自動(dòng)補(bǔ)全autocomplete

8.6.1自動(dòng)補(bǔ)全功能的基本使用

比如頁(yè)面上有一個(gè)輸入框，需要用戶輸入一種編程語(yǔ)言，這個(gè)時(shí)候我們可以編寫如下代碼：

當(dāng)輸入“c”時(shí)，頁(yè)面顯示效果如圖8-23所示。圖8-23自動(dòng)補(bǔ)全功能

輸入由ID為language的input元素完成，在HTML頁(yè)面的script元素中，我們需要同時(shí)定義建議列表(varlanguages)和必須匹配的輸入字段才能顯示建議列表。為此，只需指明input元素由jQueryUI提供的autocomplete()方法管理，同時(shí)使用source屬性({source:books})指定顯示建議列表即可。當(dāng)用戶輸入時(shí)會(huì)觸發(fā)input元素的事件，將input元素的內(nèi)容與建議列表中的內(nèi)容進(jìn)行比對(duì)，滿足條件的建議列表中的項(xiàng)將會(huì)顯示在input元素的下方供用戶選擇。

有時(shí)候我們希望選中的項(xiàng)顯示的內(nèi)容和值是不同的，類似select元素的option，此時(shí)我們可以使用下面的jQuery定義數(shù)據(jù)源：

8.6.2修改自動(dòng)補(bǔ)全功能的樣式

autocomplete()方法在輸入字段下面創(chuàng)建了一個(gè)建議列表，并向相關(guān)元素添加新的CSS類，以賦予它們適當(dāng)?shù)臉邮健Ｈ绻覀円薷乃鼈兊臉邮?，可以通過(guò)修改ui-autocomplete來(lái)修改彈出的選項(xiàng)列表的樣式；通過(guò)修改ui-autocomplete-input來(lái)修改輸入框的樣式。比如下面的CSS代碼：

上面的代碼增大輸入框中的字體大小，減小提示項(xiàng)的字體大小，頁(yè)面效果如圖8-24所示。圖8-24修改樣式后的自動(dòng)補(bǔ)全功能

8.6.3autocomplete()方法

此方法為元素附加一個(gè)菜單，當(dāng)用戶輸入時(shí)，會(huì)根據(jù)預(yù)設(shè)的值對(duì)用戶輸入進(jìn)行提示。語(yǔ)法為：

$(selector).autocomplete(options)

$(selector).autocomplete("aciton"，param)

options是以對(duì)象鍵值對(duì)的形式傳參，每個(gè)鍵值對(duì)表示一個(gè)選項(xiàng)；action是操作對(duì)話框方法的字符串，param則是options的某個(gè)選項(xiàng)。

表8-18列出了自動(dòng)補(bǔ)全功能的一些設(shè)置選項(xiàng)。

表8-19列出了自動(dòng)補(bǔ)全功能的一些操作方法。

表8-20列出了自動(dòng)補(bǔ)全功能的一些事件。

8.7進(jìn)度條progressbar

8.7.1進(jìn)度條的基本使用下面的代碼定義了一個(gè)進(jìn)度條，由于進(jìn)度條的當(dāng)前進(jìn)度不確定，因此將設(shè)置項(xiàng)value設(shè)置為false，否則進(jìn)度條顯示的就是一個(gè)空的帶邊框的div元素：

頁(yè)面效果如圖8-25所示。圖8-25進(jìn)度條效果

8.7.2修改進(jìn)度條樣式

如果需要使用進(jìn)度條指定的樣式，則可以使用下面的CSSclass名稱：

?ui-progressbar：進(jìn)度條的外層容器。該元素會(huì)為不確定的進(jìn)度條另外添加一個(gè)ui-progressbar-indeterminateclass。

■ui-progressbar-value：該元素代表進(jìn)度條的填充部分。

■ui-progressbar-overlay：用于為不確定的進(jìn)度條顯示動(dòng)畫的覆蓋層。

比如下面的CSS代碼，可以修改進(jìn)度條的寬度和高度：

顯示效果如圖8-26所示。圖8-26修改樣式后的進(jìn)度條

8.7.3progressbar()方法

和前面講的方法一樣，此方法也有兩種形式：

$(selector).progressbar(options)

$(selector).progressbar("action",param)

表8-21列出了進(jìn)度條的一些設(shè)置選項(xiàng)。

表8-22列出了