jQuery 入門教程(20): jQuery UI 基本工作過程

初始化大部分JQuery Ui組件都可以保持其狀態，因此為了能夠跟蹤UI組件的狀態，jQuery UI組件也有一個生命週期，這個生命週期從初始化開始，為了初始化一個UI組件，一般在某個HTML元素調用UI組件（外掛程式）方法。，比如 1 $( "#elem" ).progressbar();  這個方法初始化id=elem的元素，因為我們調用progressbar沒有帶參數，因此將使用預設屬性來初始化進程條。我們可以通過傳入配置的方法為jQuery UI組件修改預設值。比如： 1 $( "#elem" ).progressbar({ value: 20 });  也可以一次傳入多個參數來初始化jQuery UI組件，其它沒有配置的屬性還是使用其預設值。這些屬性也屬於jQuery UI組件狀態的一部分。初始化之後，如果需要修改這些屬性，可以通過option方法來改變。 方法初始化jQuery UI組件之後，我們可以查詢UI組件的狀態屬性，每個初始化過的UI組件都可以調用其方法，調用方法是通過傳入方法名稱，比如,　調用進程條的value方法如下： 1 $( "#elem" ).progressbar( "value" );  如果這個方法可以有參數，直接在方法名之後傳入參數，比如，設定value值為40 1 $( "#elem" ).progressbar( "value", 40 );  和前面介紹的jQuery 方法鏈一樣，jQuery UI的方法也支援多個方法串接在一起，比如： 1 $( "#elem" )  2    .progressbar( "value", 90 )  3    .addClass( "almost-done" );  通用方法對於大多數jQuery UI組件來說，有些方法是都支援的，比如：option方法正如前面說的，在UI組件初始化之後，如果需要修改一些屬性值，可以通過option方法，比如，修改progressbar的value值， 1 $( "#elem" ).progressbar( "option", "value", 30 );  注意這和前面調用value方法不同，這個例子是想修改配置項value為30.如果需要取得某個配置項的值，則使用不帶參數的調用：如： 1 $( "#elem" ).progressbar( "option", "value" );  除此之外，如果需要一次修改多個配置項，可以通過傳入對象的方法，如： 1 $( "#elem" ).progressbar( "option", {  2     value: 100,  3     disabled: true  4   });  diable方法這個方法disable某個UI組件，比如： 1 $( "#elem" ).progressbar( "disable" );  這個方法disable進程條，並修改其Style使其看起來無效。這個方法等同於設定的disable屬性為true. enable方法enable UI 組件，比如： 1 $( "#elem" ).progressbar( "enable" );  這個方法等同於設定disable屬性為false. destroy方法如果你不在需要某個UI組件，可以調用destroy()方法，這將使的對應的HTML元素恢複原狀（沒有使用jQuery之前的標記顯示）。這也終結jQuery UI的生命週期。一旦你終止UI組件，你就不能再調用UI組件的方法。如果你刪除該HTML元素，jQuery自動終止。 widget方法 某些UI組件建立一個wrapper元素或者和原先元素無關聯的新元素。在這種情況下，widget方法返回產生的新元素。對於Progressbar來說，沒有產生的HTML元素，這個方法返回原先的HTML元素。 1 $( "#elem" ).progressbar( "widget" );  事件所有UI組件都具有事件來通知其狀態發生變化。對於大部分UI組件來說，某個事件發生時，事件名以UI組件名為首碼。比如當Progressbar值發生變化時綁定一個事件處理方法： 1 $( "#elem" ).bind( "progressbarchange", function() {  2     alert( "The value has changed!" );  3   });  每個事件都有對應的回呼函數，是作為一個配置項來定義的，因此我們可以直接掛到Progressbar的change回呼函數而不要綁定到Progressbarchange事件，比如： 1 $( "#elem" ).progressbar({  2     change: function() {  3       alert( "The value has changed!" );  4     }  5   });  共有事件雖然每個UI組件支援的事件不同，但create事件是每個UI組件都支援的，這個事件在UI組件建立好後立即觸發。