发布在：jQuery UI

jQuery UI 的工作原理

jQuery UI 包含许多维护状态的小组件，因此与你已经习惯使用的典型 jQuery 插件相比，可能会有略微不同的使用模式。虽然初始化与大多数 jQuery 插件相同，但 jQuery UI 的小组件建立在小组件工厂之上，该工厂为所有小组件提供相同的通用 API。因此，如果你学会如何使用一个，那么你就会知道如何使用所有小组件！本文档将使用进度条小组件的代码示例，指导你完成常见的功能。

链接 初始化

为了跟踪小组件的状态，我们必须为小组件引入一个完整的生命周期。生命周期在小组件初始化时开始。要初始化小组件，我们只需在一个或多个元素上调用插件。

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

这将初始化 jQuery 对象中的每个元素，在本例中为 id 为“elem”的元素。因为我们调用了不带任何参数的 .progressbar() 方法，所以小组件使用其默认选项进行初始化。我们可以在初始化期间传递一组选项，以覆盖默认选项。

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

我们可以在初始化期间传递任意数量的选项。我们不传递的任何选项都将使用其默认值。

选项是小组件状态的一部分，因此我们也可以在初始化后设置选项。我们稍后将使用 option 方法看到这一点。

链接 方法

现在小部件已初始化，我们可以查询其状态或对小部件执行操作。初始化后所有操作都采用方法调用的形式。要对小部件调用方法，我们将方法名称传递给 jQuery 插件。例如，要对进度条小部件调用 value 方法，我们将使用

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

如果方法接受参数，我们可以在方法名称后传递这些参数。例如，要将参数 40 传递给 value 方法，我们可以使用

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

与 jQuery 中的其他方法一样，大多数小部件方法都会返回 jQuery 对象以用于链接。

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

link 常用方法

每个小部件都将有自己的一组方法，具体取决于小部件提供哪些功能。但是，所有小部件都有一些方法。

link 选项

如前所述，我们可以在初始化后通过 option 方法更改选项。例如，我们可以通过调用 option 方法将进度条的值更改为 30。

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

请注意，这与我们调用 value 方法的前一个示例不同。在此示例中，我们正在调用 option 方法，并表示我们希望将值选项更改为 30。

我们还可以获取选项的当前值。

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

此外，我们可以通过将对象传递给 option 方法来一次更新多个选项。

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

你可能已经注意到 option 方法与 jQuery 核心中的 getter 和 setter 具有相同的签名，例如 .css() 和 .attr()。唯一的区别是，你必须将字符串“option”作为第一个参数传递。

link 禁用

正如你可能猜到的那样，disable 方法会禁用小部件。对于进度条，这会更改样式，使进度条看起来已禁用。

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

调用 disable 方法等效于将 disabled 选项设置为 true。

link 启用

enable 方法与 disable 方法相反。

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

调用 enable 方法等效于将 disabled 选项设置为 false。

link 销毁

如果您不再需要该小部件，可以销毁它并返回到原始标记。这将结束小部件的生命周期。

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

销毁小部件后，除非您重新初始化小部件，否则您将无法再调用其上的任何方法。如果您要删除元素，无论是直接通过 .remove() 还是通过使用 .html() 或 .empty() 修改祖先，小部件都将自动销毁自身。

链接 小部件

某些小部件会生成包装元素或与原始元素断开连接的元素。在这些情况下，widget 方法将返回生成元素。在进度条等没有生成包装器的案例中，widget 方法将返回原始元素。

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

链接 事件

所有小部件都有与其各种行为关联的事件，以便在状态更改时通知您。对于大多数小部件，当触发事件时，名称会以小部件名称为前缀。例如，我们可以绑定到进度条的更改事件，该事件会在值发生更改时触发。

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

每个事件都有一个对应的回调，它作为选项公开。如果需要，我们可以连接到进度条的 change 回调，而不是绑定到 progressbarchange 事件。

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

链接 常见事件

虽然大多数事件将是特定于小部件的，但所有小部件都有一个 create 事件。此事件将在创建小部件后立即触发。