jQuery UI Widget method invocation

Widgets are created throughthe Widget Factoryusing methods to change their state after initialization and perform actions. There are two ways to call widget methods - through the plugin created by the Widget Factory, or by calling methods on the element's instance object.

Plugin invocation

To call methods using the widget's plugin, pass the method name as a string. For example, click here to see how to callthe dialog widget'sclose()method。

$( ".selector" ).dialog( "close" );

If the method requires parameters, pass them as additional arguments to the plugin. Click here to see how to callthe dialog'soption()method。

$( ".selector" ).dialog( "option", "height" );

This will returnthe dialog'sheightoptionvalue.

Instance invocation

Each instance of every widget isjQuery.data()stored on the element. To retrieve the instance object, use the widget's full name as the key name to calljQuery.data(). As shown in the example below.

var dialog = $( ".selector" ).data( "ui-dialog" );

After you reference the instance object, you can call methods directly on it.

var dialog = $( ".selector" ).data( "ui-dialog" );
dialog.close();

In jQuery UI 1.11, the newinstance()method makes this process simpler.

$( ".selector" ).dialog( "instance" ).close();

Return type

Most methods called through the widget's plugin will return ajQueryobject, so method calls can be chained with additional jQuery methods. When calling on an instance, it will returnundefined. As shown in the example below.

var dialog = $( ".selector" ).dialog();
 
// Instance invocation - returns undefined
dialog.data( "ui-dialog" ).close();
 
// Plugin invocation - returns a jQuery object
dialog.dialog( "close" );
 
// Therefore, plugin method invocation makes it possible to
// chain method calls with other jQuery functions
dialog.dialog( "close" )
    .css( "color", "red" );

The exception is those methods that return information about the widget. For examplethe dialog'sisOpen()method。

$( ".selector" )
    .dialog( "isOpen" )
    // This will throw a TypeError
    .css( "color", "red" );

This will produce anTypeErrorerror, becauseisOpen()it returns a boolean value, not a jQuery object.

Other extensions