jQuery UI 如何工作

jQuery UI 包含许多维护状态的小部件（widgets），因此它们的使用模式可能与你已经习惯的典型 jQuery 插件略有不同。虽然初始化方式与大多数 jQuery 插件相同，但 jQuery UI 的小部件是构建在 Widget Factory 之上的，它为所有小部件提供了通用的 API。所以，如果你学会了如何使用其中一个，你就知道如何使用所有的了！本文档将引导你了解通用功能，并使用 progressbar 小部件作为代码示例。

链接 初始化

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

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

这将初始化 jQuery 对象中的每个元素，在本例中是 ID 为 "elem" 的元素。由于我们在调用 .progressbar() 方法时没有传递参数，因此该小部件将以其默认选项进行初始化。我们可以在初始化期间传递一组选项，以覆盖默认选项。

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

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

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

链接 方法

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

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

如果该方法接受参数，我们可以在方法名之后传递它们。例如，要将参数 40 传递给 value 方法，我们可以使用：

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

就像 jQuery 中的其他方法一样，大多数小部件方法都会返回 jQuery 对象以便进行链式调用。

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

链接 常用方法

每个小部件都会根据其提供的功能拥有一组属于自己的方法。但是，有一些方法存在于所有小部件中。

链接 option

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

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

请注意，这与之前调用 value 方法的示例不同。在此示例中，我们调用的是 option 方法，并说明我们要将 value 选项更改为 30。

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

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

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

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

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

链接 disable

正如你所猜到的，disable 方法会禁用小部件。对于 progressbar，这会更改样式，使进度条看起来处于禁用状态。

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

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

链接 enable

enable 方法与 disable 方法相反。

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

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

链接 destroy

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

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

一旦你销毁了一个小部件，你就不能再在其上调用任何方法，除非你再次初始化该小部件。如果你删除了该元素，无论是直接通过 .remove() 还是通过修改父元素 .html() 或 .empty()，小部件都会自动销毁自身。

链接 widget

某些小部件会生成包装元素，或者与原始元素断开连接的元素。在这些情况下，widget 方法将返回生成的元素。在像 progressbar 这样没有生成包装器的情况下，widget 方法返回原始元素。

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

链接 事件

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

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

每个事件都有一个对应的回调，它作为一个选项公开。如果愿意，我们可以挂钩到 progressbar 的 change 回调，而不是绑定到 progressbarchange 事件。

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

链接 常用事件

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