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

jQuery UI 中包含许多保持状态的小部件，因此比典型的 jQuery 插件稍有不同的使用模式。所有的jQuery UI 小部件使用相同的模式，这是由部件库（Widget Factory）定义的。所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

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

注意：本章节使用 进度条部件（Progressbar Widget） 演示实例，但是语法适用于每个小部件。

初始化

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

$( "#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;

选项是小部件状态的组成部分，所以我们也可以在初始化后设置选项。我们会在后续看到 option 方法。

方法

现在小部件已经初始化，我们可以查询它的状态，或者在小部件上执行动作。所有初始化后的动作都是以方法调用方式执行。为了在小部件上调用一个方法，我们向 jQuery 插件传递方法的名称。例如，在进度条部件（Progressbar Widget）上调用 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!" );
  }
});

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

实例化

小部件的实例是使用带有小部件全称作为键的 jQuery.data() 存储的。因此，您可以使用下面代码从元素检索进度条部件（Progressbar Widget）的实例对象。

$( "#elem" ).data( "ui-progressbar" );

元素是否绑定了给定小部件，可以使用 :data 选择器来检测。

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

您也可以使用 :data 来获得作为给定小部件实例的所有元素的列表。

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

属性

所有的小部件都有下面的属性：

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