jQuery UI 基本工作過程

本篇介紹 JQuery UI 組件的基本工作過程，以進程條（Progressbar)為例介紹 JQuery UI 組件工作的基本過程。

初始化

大部分 JQuery Ui 組件都可以保持其狀態(tài)，因此為了能夠跟蹤 UI 組件的狀態(tài)，jQuery UI 組件也有一個生命周期，這個生命周期從初始化開始，為了初始化一個 UI 組件，一般在某個 HTML 元素調用 UI 組件（插件）方法。，比如

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

這個方法初始化 id=elem 的元素，因為我們調用 progressbar 沒有帶參數(shù)，因此將使用缺省屬性來初始化進程條。我們可以通過傳入配置的方法為 jQuery UI 組件修改缺省值。比如：

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

也可以一次傳入多個參數(shù)來初始化 jQuery UI 組件，其它沒有配置的屬性還是使用其缺省值。這些屬性也屬于 jQuery UI 組件狀態(tài)的一部分。初始化之后，如果需要修改這些屬性，可以通過 option 方法來改變。

方法

初始化 jQuery UI 組件之后，我們可以查詢 UI 組件的狀態(tài)屬性，每個初始化過的 UI 組件都可以調用其方法，調用方法是通過傳入方法名稱，比如,　調用進程條的 value 方法如下：

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

如果這個方法可以有參數(shù)，直接在方法名之后傳入?yún)?shù)，比如，設置 value 值為40

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

和前面介紹的 jQuery 方法鏈一樣，jQuery UI 的方法也支持多個方法串接在一起，比如：

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

通用方法

對于大多數(shù) jQuery UI 組件來說，有些方法是都支持的，比如：

option 方法

正如前面說的，在 UI 組件初始化之后，如果需要修改一些屬性值，可以通過 option 方法，比如，修改 progressbar 的 value 值，

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

注意這和前面調用 value 方法不同，這個例子是想修改配置項 value 為30. 如果需要取得某個配置項的值，則使用不帶參數(shù)的調用：如：

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

除此之外，如果需要一次修改多個配置項，可以通過傳入對象的方法，如：

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

diable 方法

這個方法 disable 某個 UI 組件，比如：

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

這個方法 disable 進程條，并修改其 Style 使其看起來無效。這個方法等同于設置的 disable 屬性為 true.

enable 方法

enable UI 組件，比如：

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

這個方法等同于設置 disable 屬性為 false.

destroy 方法

如果你不在需要某個 UI 組件，可以調用 destroy()方法，這將使的對應的 HTML 元素恢復原狀（沒有使用 jQuery 之前的標記顯示）。這也終結 jQuery UI 的生命周期。一旦你終止 UI 組件，你就不能再調用UI組件的方法。如果你刪除該 HTML 元素，jQuery 自動終止。

widget 方法

某些 UI 組件創(chuàng)建一個 wrapper 元素或者和原先元素無關聯(lián)的新元素。在這種情況下，widget 方法返回生成的新元素。對于 Progressbar 來說，沒有生成的 HTML 元素，這個方法返回原先的 HTML 元素。

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

事件

所有 UI 組件都具有事件來通知其狀態(tài)發(fā)生變化。對于大部分 UI 組件來說，某個事件發(fā)生時，事件名以 UI 組件名為前綴。比如當 Progressbar 值發(fā)生變化時綁定一個事件處理方法：

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

每個事件都有對應的回調函數(shù)，是作為一個配置項來定義的，因此我們可以直接掛到 Progressbar 的change 回調函數(shù)而不要綁定到 Progressbarchange 事件，比如：

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

共有事件

雖然每個 UI 組件支持的事件不同，但 create 事件是每個 UI 組件都支持的，這個事件在 UI 組件創(chuàng)建好后立即觸發(fā)。