jQuery UI 工作原理

jQuery UI 工作原理

jQuery UI包含了許多維持狀態(tài)的小部件（Widget），它與典型的jQuery插件使用模式略有不同。jQuery UI小部件的安裝方式與大部分jQuery插件的安裝方式類似，jQuery UI 的小部件是基于部件庫（Widget Factory）創(chuàng)建的，小部件庫提供了通用的API。所以，只要您學(xué)會(huì)使用其中一個(gè)，您就知道如何使用其他的小部件（Widget）。

本節(jié)將通過進(jìn)度條（progressbar）小部件代碼實(shí)例介紹常見的功能。

安裝

為了跟蹤部件的狀態(tài)，我們首先介紹一下小部件的全生命周期。當(dāng)小部件安裝時(shí)，生命周期開始。我們只需要在一個(gè)或多個(gè)元素上調(diào)用插件，即安裝了小部件。

$( "#elem" ).progressbar();

上述操作將會(huì)初始化jQuery對(duì)象中的每個(gè)元素，在本例中，元素id為"elem"。因?yàn)槲覀冋{(diào)用無參數(shù)的.progressbar()方法，小部件則會(huì)按照它的默認(rèn)選項(xiàng)進(jìn)行初始化。我們可以在安裝時(shí)傳遞一組選項(xiàng)，這樣既可重寫默認(rèn)選項(xiàng)。

$( "#elem" ).progressbar({ value: 20 });

安裝時(shí)傳遞的選項(xiàng)數(shù)目多少可根據(jù)我們的需要而定。任何我們未傳遞的選項(xiàng)則都使用它們的默認(rèn)值。

選項(xiàng)是小部件狀態(tài)的組成部分，所以我們也可以在安裝后再進(jìn)行設(shè)置選項(xiàng)。我們將在后續(xù)的option方法中介紹這部分內(nèi)容。

方法

既然小部件已經(jīng)初始化，我們就可以查詢它的狀態(tài)，或者在小部件上執(zhí)行動(dòng)作。所有初始化后的動(dòng)作都以方法調(diào)用的形式進(jìn)行。為了在小部件上調(diào)用一個(gè)方法，我們可以向jQuery插件傳遞方法的名稱。例如，為了在進(jìn)度條（progressbar）小部件上調(diào)用value方法，我們應(yīng)該使用：

$( "#elem" ).progressbar( "value" );

如果方法接受參數(shù)，我們可以在方法名后傳遞參數(shù)。例如，為了傳遞參數(shù)40給value方法，我們可以使用下述操作：

$( "#elem" ).progressbar( "value", 40 );

就像jQuery中的其他方法一樣，大部分的小部件方法為鏈接返回jQuery對(duì)象。

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

公共的方法

每個(gè)小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。

option

正如我們前面所提到的，我們可以在初始化之后通過option方法改變選項(xiàng)。例如，我們可以通過調(diào)用option方法將progressbar（進(jìn)度條）的value設(shè)置為30。

$( "#elem" ).progressbar( "option", "value", 30 );

請(qǐng)注意，這與之前我們調(diào)用value方法的實(shí)例有所不同。在本實(shí)例中，我們調(diào)用option方法，改變value選項(xiàng)為30。

我們也可以為某個(gè)選項(xiàng)獲取當(dāng)前的值。

$( "#elem" ).progressbar( "option", "value" );

另外，我們可以通過給option方法傳遞一個(gè)對(duì)象，一次更新多個(gè)選項(xiàng)。

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

您也許注意到option方法有著與jQuery代碼中取值器和設(shè)置器相同的標(biāo)志，就像.css()和.attr()。唯一的不同就是您必須傳遞字符串"option"作為第一個(gè)參數(shù)。

disable

disable方法禁用小部件。在進(jìn)度條（progressbar）實(shí)例中，這會(huì)改變樣式讓進(jìn)度條顯示為禁用狀態(tài)。

$( "#elem" ).progressbar( "disable" );

調(diào)用disable方法等同于設(shè)置disabled選項(xiàng)為true。

enable

enable方法是disable方法的對(duì)立面。

$( "#elem" ).progressbar( "enable" );

調(diào)用enable方法等同于設(shè)置disabled選項(xiàng)為false。

destroy

如果您不再需要小部件，那么可以銷毀它，返回到最初的標(biāo)記。這意味著小部件生命周期的終止。

$( "#elem" ).progressbar( "destroy" );

一旦您銷毀了一個(gè)小部件，您就不能在該部件上調(diào)用任何方法，除非您再次初始化這個(gè)小部件。如果您要移除元素，可以直接通過.remove()，也可以通過 .html()或.empty()修改祖先，小部件會(huì)自動(dòng)銷毀。

widget

一些小部件生成包裝器元素，或與原始元素?cái)嚅_連接的元素。在下面的實(shí)例中，widget將返回生成的元素。在進(jìn)度條（progressbar）實(shí)例中，沒有生成的包裝器，widget方法返回原始的元素。

$( "#elem" ).progressbar( "widget" );

事件

所有的小部件都有跟他們各種行為相關(guān)的事件，用于在狀態(tài)改變時(shí)通知您。對(duì)于大多數(shù)的小部件，當(dāng)事件被觸發(fā)時(shí)，名稱以小部件名稱為前綴。例如，我們可以綁定進(jìn)度條的change事件，一旦值發(fā)生變化時(shí)就觸發(fā)。

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

每個(gè)事件都有一個(gè)相對(duì)應(yīng)的回調(diào)，作為選項(xiàng)進(jìn)行呈現(xiàn)。我們可以使用進(jìn)度條（progressbar）的change回調(diào)，這等同于綁定progressbarchange事件。

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

公共的事件

大多數(shù)事件是針對(duì)特定的小部件，所有的小部件都有一個(gè)公共的create事件。該事件在小部件被創(chuàng)建時(shí)即被觸發(fā)。