Latest web development tutorials

jQuery UI widgets method call

Widget (Widget) by member libraries (Widget Factory) using the method to change their status and perform actions after initialization is created. There are two ways to call widgets method - through member libraries (Widget Factory) to create plug-ins, or by the method of the element instance of an object on the call.

Plug-in calls

Widgets plug-call method, the method name as a string passed. For example, click here to see, how to call dialog (dialog) widget close() method .

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

If the method requires parameters, passed to the plug-in as an additional parameter. Click here to see, how to call dialog (dialog) of option() method .

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

This returns the dialog (dialog) in height option values.

Example Call

Each instance of each widget is using jQuery.data() is stored in the element. In order to retrieve an instance of an object, use the full name of the widget to call as a key jQuery.data() . As specific examples shown below.

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

After you reference an instance of an object, you can call the method directly above.

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

In jQuery UI 1.11, the new instance() method will make this process easier.

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

Return Type

Most of the methods called by the widget plugin will return a jQuery object, so methods can be invoked through additional jQuery methods link. When called on the instance, it returns undefined . As specific examples shown 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" );

Exceptionally, those methods return information about the widget. For example dialog (dialog) of isOpen() method .

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

This results in a TypeError error because isOpen() returns a Boolean value, not a jQuery object.