jQuery UI 如何使用部件库

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JQuery›JQuery UI教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

在本节中，我们将介绍jQuery UI如何使用部件库。

在下述的示例中，我们将创建一个进度条，这可以通过调用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事件对象，以及一个与事件相关的数据哈希。回调名称是唯一一个必需的参数，但是对于想要在插件上实现自定义功能的用户，其他的参数是非常有用的。例如，如果我们创建一个可拖拽插件，我们可以在触发拖拽回调时传递mousemove事件，这将允许用户对基于由事件对象提供的x/y坐标上的拖拽做出反应。请注意，传递到_trigger()的原始的事件必须是一个jQuery事件，而不是一个原生的浏览器事件。

$.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 );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {  
           value = 0;       
  }  
       return value;  
   }
 });

回调函数本质上只是附加选项，所以您可以像其他选项一样获取并设置它们。无论何时执行回调，都会有一个相对应的事件被触发。事件类型是通过连接插件的名称和回调函数名称确定的。回调和事件都接受两个相同的参数：一个事件对象和一个与事件相关的数据哈希，具体如下面实例所示。您的插件可能需要包含防止用户使用的功能，为了做到这点，最好的方法就是创建爱你可撤销的回调。用户可以撤销回调或者相关的事件，与他们撤销任何一个原生事件一样，都是通过调用 event.preventDefault()或返回false来实现的。如果用户撤销回调，_trigger()方法将返回false，这样您就能在插件内实现合适的功能。

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

本质

现在我们已经看到如何使用部件库（Widget Factory）创建一个插件，接下来让我们看看它实际上是如何工作的。当您调用jQuery.widget()时，它将为插件创建一个构造函数，并设置您为插件实例传入的作为原型的对象。所有自动添加到插件的功能都来自一个基本的小部件原型，该原型定义为jQuery.Widget.prototype。当创建插件实例时，会使用jQuery.data把它存储在原始的DOM元素上，插件名作为键名。

由于插件实例直接链接到DOM元素上，您可以直接访问插件实例，而不需要遍历插件方法。这将允许您直接在插件实例上调用方法，而不需要传递字符串形式的方法名，同时您也可以直接访问插件的属性。

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );
您也可以在不遍历插件方法的情况下创建一个实例，通过选项和元素直接调用构造函数即可：
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

扩展插件的原型

插件有构造函数和原型的最大好处是易于扩展插件。通过添加或修改插件原型上的方法，我们可以修改插件所有实例的行为。例如，如果我们想要向进度条添加一个方法来重置进度为0%，我们可以向原型添加这个方法，它将在所有插件实例上可调用。

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

如需了解扩展小部件的更多细节，以及如何在一个已有的小部件上创建一个全新的小部件的更多细节，请查看通过部件库（Widget Factory）扩展小部件（Widget）。

清理

在某些情况下，允许用户应用插件，然后再取消应用。您可以通过_destroy()方法做到这一点。在_destroy()方法内，您应该撤销在初始化和后期使用期间插件所做的一切动作。_destroy()是通过.destroy()方法被调用的，.destroy()方法是在插件实例绑定的元素从DOM上移除时被自动调用的，所以这可被用于垃圾回收。基本的.destroy()方法也处理一些常用的清理操作，比如从小部件的DOM元素上移除实例引用，从元素上解除绑定小部件命名空间中的所有事件，解除绑定所有使用_bind()添加的事件。

$.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 );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {     
        value = 0;     
    }
          return value;  
   },  
   _destroy: function() { 
        this.element          
   .removeClass( "progressbar" )         
    .text( "" );   
  }
 });