jQuery 入门教程(20): jQuery UI 基本工作过程

怼烎@ 2023-10-16 19:06 27阅读 0赞

本篇介绍JQuery UI组件的基本工作过程，以进程条（Progressbar)为例介绍JQuery UI组件工作的基本过程。

### 初始化 ###

大部分JQuery Ui组件都可以保持其状态，因此为了能够跟踪UI组件的状态，jQuery UI组件也有一个生命周期，这个生命周期从初始化开始，为了初始化一个UI组件，一般在某个HTML元素调用UI组件（插件）方法。，比如

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">1</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(&nbsp;</code><code style="">"#elem"</code>&nbsp;<code style="">).progressbar();</code></td> 
  </tr> 
 </tbody> 
</table>

这个方法初始化id=elem的元素，因为我们调用progressbar没有带参数，因此将使用缺省属性来初始化进程条。我们可以通过传入配置的方法为jQuery UI组件修改缺省值。比如：

也可以一次传入多个参数来初始化jQuery UI组件，其它没有配置的属性还是使用其缺省值。这些属性也属于jQuery UI组件状态的一部分。初始化之后，如果需要修改这些属性，可以通过option方法来改变。

### 方法 ###

初始化jQuery UI组件之后，我们可以查询UI组件的状态属性，每个初始化过的UI组件都可以调用其方法，调用方法是通过传入方法名称，比如,　调用进程条的value方法如下：

如果这个方法可以有参数，直接在方法名之后传入参数，比如，设置value值为40

和前面介绍的jQuery 方法链一样，jQuery UI的方法也支持多个方法串接在一起，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;</code><code style="">.progressbar(&nbsp;</code><code style="">"value"</code><code style="">, 90 )</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;</code><code style="">.addClass(&nbsp;</code><code style="">"almost-done"</code>&nbsp;<code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

### 通用方法 ###

对于大多数jQuery UI组件来说，有些方法是都支持的，比如：  
option方法  
正如前面说的，在UI组件初始化之后，如果需要修改一些属性值，可以通过option方法，比如，修改progressbar的value值，

注意这和前面调用value方法不同，这个例子是想修改配置项value为30.  
如果需要取得某个配置项的值，则使用不带参数的调用：如：

除此之外，如果需要一次修改多个配置项，可以通过传入对象的方法，如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">value: 100,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">disabled:&nbsp;</code><code style="">true</code></td> 
  </tr> 
 </tbody> 
</table>

diable方法  
这个方法disable某个UI组件，比如：

这个方法disable进程条，并修改其Style使其看起来无效。这个方法等同于设置的disable属性为true.

enable方法  
enable UI 组件，比如：

这个方法等同于设置disable属性为false.

destroy方法  
如果你不在需要某个UI组件，可以调用destroy()方法，这将使的对应的HTML元素恢复原状（没有使用jQuery之前的标记显示）。这也终结jQuery UI的生命周期。一旦你终止UI组件，你就不能再调用UI组件的方法。如果你删除该HTML元素，jQuery自动终止。

widget方法

某些UI组件创建一个wrapper元素或者和原先元素无关联的新元素。在这种情况下，widget方法返回生成的新元素。对于Progressbar来说，没有生成的HTML元素，这个方法返回原先的HTML元素。

### 事件 ###

所有UI组件都具有事件来通知其状态发生变化。对于大部分UI组件来说，某个事件发生时，事件名以UI组件名为前缀。比如当Progressbar值发生变化时绑定一个事件处理方法：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">1</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(&nbsp;</code><code style="">"#elem"</code>&nbsp;<code style="">).bind(&nbsp;</code><code style="">"progressbarchange"</code><code style="">,&nbsp;</code><code style="">function</code><code style="">() { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">alert(&nbsp;</code><code style="">"The value has changed!"</code>&nbsp;<code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

每个事件都有对应的回调函数，是作为一个配置项来定义的，因此我们可以直接挂到Progressbar的change回调函数而不要绑定到Progressbarchange事件，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">change:&nbsp;</code><code style="">function</code><code style="">() { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">alert(&nbsp;</code><code style="">"The value has changed!"</code>&nbsp;<code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

### 共有事件 ###

虽然每个UI组件支持的事件不同，但create事件是每个UI组件都支持的，这个事件在UI组件创建好后立即触发