jQuery UI 如何使用部件库（Widget Factory）

jQuery UI 如何使用部件库（Widget Factory）我们将创建一个进度条。正如下面实例所示，这可以通过调用 jQuery.widget() 来完成，它带有两个参数：一个是要创建的插件名称，一个是包含支持插件的函数的对象文字。当插件被调用时，它将创建一个新的插件实例，所有的函数都将在该实例的语境中被执行。这与两种重要方式的标准 jQuery 插件不同。首先，语境是一个对象，不是 DOM 元素。其次，语境总是一个单一的对象，不是一个集合。$.widget( "custom.progressbar", { _create:





function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});插件的名称必须包含命名空间，在这个实例中，我们使用了 custom 命名空间。您只能创建一层深的命名空间，因此，custom.progressbar 是一个有效的插件名称，而 very.custom.progressbar 不是一个有效的插件名称。我们看到部件库（Widget Factory）为我们提供了两个属性。this.element 是一个包含一个元素的 jQuery 对象。如果我们的插件在包含多个元素的 jQuery 对象上调用，则会为每个元素创建一个单独的插件实例，且每个实例都会有自己的 this.element。第二个属性，this.options，是一个包含所有插件选项的键名/键值对的哈希（hash）。这些选项可以被传给插件，如下所示：$( "<div></div>" ) .appendTo( "body" ) .progressbar({ value:





20 });当我们调用 jQuery.widget()，它通过给 jQuery.fn（用于创建标准插件的系统） 添加函数来扩展 jQuery。所添加的函数名称是基于您传给 jQuery.widget() 的名称，不带命名空间 - "progressbar"。传给插件的选项是在插件实例中获取设置的值。如下面的实例所示，我们可以为任意一个选项指定默认值。当设计您的 API 时，您应该清楚你的插件的最常见的使用情况，以便您可以设置适当的默认值，且确保使所有的选项真正可选。$.widget( "custom.progressbar", { // Default options. options:





{ value:





0 }, _create:





function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});调用插件方法现在我们可以初始化我们的进度条，我们将通过在插件实例上调用方法来执行动作。为了定义一个插件方法，我们只在我们传给 jQuery.widget() 的对象中引用函数。我们也可以通过给函数名加下划线前缀来定义 "private" 方法。$.widget( "custom.progressbar", { options:





{ value:





0 }, _create:





function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }, // Create a public method. value:





function( value ) { // No value passed, act as a getter. if ( value === undefined ) { return this.options.value; } // Value passed, act as a setter. this.options.value = this._constrain( value ); var progress = this.options.value + "%"; this.element.text( progress ); }, // Create a private method. _constrain:





function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; }});为了在插件实例上调用方法，您可以向 jQuery 插件传递方法的名称。如果您调用的方法接受参数，您只需简单地在方法名后面传递这些参数即可。注意：通过向同一个用于初始化插件的 jQuery 函数传递方法名来执行方法。这样做是为了在保持链方法调用时防止 jQuery 命名空间污染。在本章节的后续，我们将看到看起来更自然的其他用法。var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ value:





20 }); // Get the current value.alert( bar.progressbar( "value" ) ); // Update the value.bar.progressbar( "value", 50 ); // Get the current value again.alert( bar.progressbar( "value" ) );使用选项option() 方法是自动提供给插件的。option() 方法允许您在初始化后获取并设置选项。该方法像 jQuery 的 .css() 和 .attr() 方法：您可以只传递一个名称作为取值器来使用，也可以传递一个名称和值作为设置器使用，或者传递一个键名/键值对的哈希来设置多个值。当作为取值器使用时，插件将返回与传入名称相对应的选项的当前值。当作为设置器使用时，插件的 _setOption 方法将被每个被设置的选项调用。我们可以在我们的插件中指定一个 _setOption 方法来反应选项更改。对于更改选项要独立执行的动作，我们可以重载 _setOptions。$.widget( "custom.progressbar", { options:





{ value:





0 }, _create:





function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption:





function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions:





function( options ) { this._super( options ); this.refresh(); }, refresh:





function() { var progress = this.options.value + "%"; this.element.text( progress ); }, _constrain:





function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; }});添加回调最简单的扩展插件的方法是添加回调，这样用户就可以在插件状态发生变化时做出反应。我们可以看下面的实例如何在进度达到 100% 时添加回调到进度条。_trigger() 方法有三个参数：回调名称，一个启动回调的 jQuery 事件对象，以及一个与事件相关的数据哈希。回调名称是