jQuery入门（20） jQuery UI基本工作过程

jQuery入门（20） jQuery UI基本工作过程2013-05-22 引路蜂移动软件本篇介绍JQuery UI组件的基本工作过程，以进程条（Progressbar）为例介绍JQuery UI组件工作的基本过程。

初始化

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

$（ "#elem" ）.progressbar（）;

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

$（ "#elem" ）.progressbar（{ value: 20 }）;

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

方法

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

$（ "#elem" ）.progressbar（ "value" ）;

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

$（ "#elem" ）.progressbar（ "value", 40 ）;

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

$（ "#elem" ）.progressbar（ "value", 90 ）.addClass（ "almost-done" ）;

通用方法

对于大多数jQuery UI组件来说，有些方法是都支持的，比如：

option方法

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

$（ "#elem" ）.progressbar（ "option", "value", 30 ）;

注意这和前面调用value方法不同，这个例子是想修改配置项value为30.

如果需要取得某个配置项的值，则使用不带参数的调用：如：

$（ "#elem" ）.progressbar（ "option", "value" ）;

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

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

diable方法

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

$（ "#elem" ）.progressbar（ "disable" ）;

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