小部件工厂

你可以从头开始创建新小部件，仅使用 $.Widget 对象作为要继承的基础，或者你可以明确继承自现有的 jQuery UI 或第三方小部件。使用与你继承自相同名称定义小部件，甚至允许你扩展小部件。

jQuery UI 包含许多维护状态的小部件，因此与典型 jQuery 插件相比，它们的用法模式略有不同。所有 jQuery UI 的小部件都使用相同模式，由小部件工厂定义。因此，如果你学习如何使用一个小部件，那么你就会知道如何使用所有小部件。

正在寻找有关小部件工厂的教程？查看jQuery 学习中心上的文章。

注意：此文档显示使用进度条小部件的示例，但语法对于每个小部件都是相同的。

初始化

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

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

这将初始化 jQuery 对象中的每个元素，在本例中为 id 为 "elem" 的元素。

选项

由于 progressbar() 在没有参数的情况下被调用，所以小部件使用其默认选项进行初始化。我们可以在初始化期间传递一组选项来覆盖默认选项

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

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

您可以传递多个选项参数。这些参数将合并到一个对象中（类似于 $.extend( true, target, object1, objectN )）。这对于在实例之间共享选项，同时为每个实例覆盖某些属性非常有用

var options = { modal: true, show: "slow" };
$( "#dialog1" ).dialog( options );
$( "#dialog2" ).dialog( options, { autoOpen: false });

在初始化时传递的所有选项都将进行深度复制，以确保以后可以修改对象而不影响小部件。数组是唯一的例外，它们被引用为原样。此例外是为了支持数据绑定，其中数据源必须保留为引用。

默认值存储在小部件的原型上，因此我们有能力覆盖 jQuery UI 设置的值。例如，在设置以下内容后，所有未来的进度条实例都将默认为 80

$.ui.progressbar.prototype.options.value = 80;

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

方法

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

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

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

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

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

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

每个小部件都将拥有自己的一组方法，具体取决于小部件提供的功能。但是，所有小部件上都存在一些方法，如下所述。

事件

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

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

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

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

所有小部件都有一个 create 事件，该事件在实例化时触发。

实例

可以使用 instance() 方法从给定元素中检索小部件的实例。

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

如果在未与小部件关联的元素上调用 instance() 方法，则返回 undefined。

$( "#not-a-progressbar" ).progressbar( "instance" ); // undefined

实例使用 jQuery.data() 存储，其中小部件的全名用作键。因此，:data 选择器还可以确定元素是否绑定了给定小部件。

$( "#elem" ).is( ":data('ui-progressbar')" ); // true
$( "#elem" ).is( ":data('ui-draggable')" ); // false

与 instance() 不同，即使正在测试的小部件尚未加载，也可以使用 :data。

$( "#elem" ).nonExistentWidget( "instance" ); // TypeError
$( "#elem" ).is( ":data('ui-nonExistentWidget')" ); // false

您还可以使用 :data 获取给定小部件的所有实例元素的列表。

$( ":data('ui-progressbar')" );

属性

所有小部件都具有以下属性集

• defaultElement：在不提供元素的情况下构造小部件实例时要使用的元素。例如，由于进度条的 defaultElement 是 "<div>"，因此 $.ui.progressbar({ value: 50 }) 在新创建的 <div> 上实例化进度条小部件实例。
• document：包含小部件元素所在 document 的 jQuery 对象。如果您需要与 iframe 中的小部件进行交互，这将很有用。
• element：包含用于实例化小部件的元素的 jQuery 对象。如果您选择多个元素并调用 .myWidget()，则会为每个元素创建一个单独的小部件实例。因此，此属性将始终包含一个元素。
• namespace：小部件原型存储在全局 jQuery 对象上的位置。例如，"ui" 的 namespace 表示小部件原型存储在 $.ui 上。
• options：包含小部件当前正在使用的选项的对象。在实例化时，用户提供的任何选项都将自动与 $.myNamespace.myWidget.prototype.options 中定义的任何默认值合并。用户指定的选项将覆盖默认值。
• uuid：小部件的唯一整数标识符。
• version：小部件的字符串版本。对于 jQuery UI 小部件，这将设置为小部件正在使用的 jQuery UI 版本。小部件开发人员必须在其原型中显式设置此属性。
• widgetEventPrefix：添加到此小组件触发的事件名称前缀。例如，可拖动小组件 的 widgetEventPrefix 为 "drag"，因此，在创建可拖动小组件时，触发的事件名称为 "dragcreate"。默认情况下，小组件的 widgetEventPrefix 为其名称。注意：此属性已弃用，将在以后的版本中删除。事件名称将更改为 widgetName:eventName（例如 "draggable:create"）。
• widgetFullName：包括命名空间在内的小组件全名。对于 $.widget( "myNamespace.myWidget", {} )，widgetFullName 将为 "myNamespace-myWidget"。
• widgetName：小组件的名称。对于 $.widget( "myNamespace.myWidget", {} )，widgetName 将为 "myWidget"。
• window：包含小组件元素所在 window 的 jQuery 对象。如果您需要与 iframe 中的小组件进行交互，此对象非常有用。