jQuery UI widgets via widget library expansion

jQuery UI widget library (Widget Factory) makes it easier to create widgets, those widgets extends the functionality of existing widgets. This way you can create on the basis of the existing powerful widgets, you can also make fine adjustments on the existing widget function.

Note: Before studying this chapter, you need to understand what a widget library (Widget Factory), and how it works. If you are not familiar with this knowledge, so please review how to use parts library (Widget Factory) section.

Create the widget extension

Create a widget by widget library (Widget Factory) through to $.widget() is passed the name of the widget and a prototype object to complete. The following example is to create a "superDialog" widget in the "custom" namespace.

$.widget( "custom.superDialog", {} );

To support the expansion, $.widget() Optional accepted as a member to use the parent widget constructor. When specifying a parent member when it is passed as the second argument, the widget name on the back, in front of the widget prototype object.

Like the example above, the following should also create a "superDialog" widget in the "custom" namespace. But this transfer is jQuery UI's dialog (dialog) widget constructor ( $.ui.dialog ), represents superDialog widget should use jQuery UI's dialog (dialog) widget as a parent member.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Here, superDialog two and dialog widgets are essentially equivalent, just a different name and namespace only. In order for our new widget more features we can add some methods to its prototype object.

Widget prototype object is passed to the $.widget() last argument. So far, our example uses a null object. Now let's add a method to the object:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Now superDialog have a red() method, which will change its text color red. Please note that the member libraries (Widget Factory) is how to automatically set this as a widget instance object. For a list of all the properties and methods available on the instance, visit the member libraries (Widget Factory) API documentation .

Extend existing methods

Sometimes, you need to adjust the behavior of an existing component or add methods. You can specify the name of the method name of the method on the prototype object needs to reload. The following example overrides dialog (dialog) of the open() method . Because the dialog box is enabled by default, when you run this code, "open" it will be recorded.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

When you run this code, there is a problem. Since we overloaded open() the default behavior, so the dialog (dialog) is no longer displayed on the screen.

When we use the prototype object, we are actually overlaps the original method, using a new method in the prototype chain.

In order for the parent assembly methods are available, member library (Widget Factory) provides two methods - _super() and _superApply() .

Use _super() and _superApply() to access the parent member

_super() and _superApply() calls in the same manner as the parent component. Consider the following examples. Like last instance, which are overloaded open() method to record the "open" . However, this run _super() is called dialog (dialog) of the open() , and the Open dialog box.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() and _superApply() is virtually identical to the original Function.prototype.call() and Function.prototype.apply() method. Therefore, _super() accepts a list of parameters, _superApply() accepts an array as a parameter. The following example demonstrates that different between the two.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

Redefine widget

jQuery UI 1.9 added redefine the widget function. Therefore, you can not create a new widget, we only need to pass $.widget() so that an existing widget name and constructor. The following examples in the open() to add the same record, but not by creating a new widget to complete.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

Through this method, we can extend a small part of the existing method, but you can still use _super() to access the original method - these are not by creating a new widget to complete, but that is directly redefine widget can.

Widgets (Widgets) and polymorphism (Polymorphism)

When extended between widgets and plug-ins to interact with their time, it is noteworthy that the plug member can not be used to call the parent method subassembly element. The following example demonstrates this.

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Examples of the above, the parent member of the plug-in, dialog() , you can not call superDialog elements on the close() method. For more information call the widget method, see the widget (Widget) method call .

Examples of custom personalized

So far, we have seen instances of the widget prototype extension methods. On the prototype overloaded method affects all instances of the widget.

To illustrate this point, consider the following examples. dialog (dialog) the two forces are using the same open() method.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

Sometimes, you just need to change the behavior of an instance of the widget. To do this, you need to use a normal attribute assignment JavaScript, get a reference to instances and override this method. As specific examples shown below.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Overloaded Technical personalization is the perfect example of a one-time customization.