How jQuery UI works

jQuery UI contains many widgets that maintain state, so it is slightly different from the typical jQuery plug-in usage pattern. The installation method is similar to that of most jQuery plug-ins. jQuery UI widgets are created based on the Widget Factory, which provides a common API. So once you learn to use one, you know how to use the other widgets. This tutorial will introduce common functionality through code examples of the progressbar widget.

Installation

In order to track the status of the widget, we first introduce the full life cycle of the widget. The lifecycle begins when the widget is installed. We only need to call the plugin on one or more elements, i.e. the widget is installed.

$( "#elem" ).progressbar();

This will initialize each element in the jQuery object, in this case, the element id is "elem". Because we call the .progressbar() method without parameters, the widget will be initialized with its default options. We can pass a set of options during installation to override the default options.

$( "#elem" ).progressbar({ value: 20 });

The number of options passed during installation can be determined according to our needs. Any options we don't pass have their default values ​​used.

Options are part of the widget state, so we can also set options after installation. We will introduce this part in the subsequent option method.

Method

Now that the widget has been initialized, we can query its status or perform actions on the widget. All actions after initialization are performed in the form of method calls. In order to call a method on a widget, we can pass the name of the method to the jQuery plugin. For example, to call the value method on the progressbar widget, we should use:

$( "#elem" ).progressbar( "value" );

If the method accepts parameters, we can pass the parameters after the method name. For example, to pass the parameter 40 to the value method, we can use:

$( "#elem" ).progressbar( "value", 40 );

Like other methods in jQuery, most widget methods are links Returns a jQuery object.

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

Public methods

Each widget has its own set of methods based on the functionality provided by the widget. However, there are some methods that are common to all widgets.

option

As we mentioned before, we can change options after initialization through the option method. For example, we can change the value of the progressbar (progress bar) to 30 by calling the option method.

$( "#elem" ).progressbar( "option", "value", 30 );

Please note that this is different from the previous instance where we called the value method. In this example, we call the option method and change the value option to 30.

We can also get the current value for an option.

$( "#elem" ).progressbar( "option", "value" );

In addition, we can update multiple options at once by passing an object to the option method.

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

You may notice that the option method has the same flags as the getters and setters in jQuery code, like .css() and .attr( ). The only difference is that you must pass the string "option" as the first argument.

disable

disable method disables the widget. In a progressbar instance, this changes the style so that the progressbar appears disabled.

$( "#elem" ).progressbar( "disable" );

Calling the disable method is equivalent to setting the disabled option to true. The

enable

enable method is the opposite of the disable method.

$( "#elem" ).progressbar( "enable" );

Calling the enable method is equivalent to setting the disabled option to false.

destroy

If you no longer need the widget, you can destroy it and return to the original markup. This means the end of the widget's life cycle.

$( "#elem" ).progressbar( "destroy" );

Once you destroy a widget, you cannot call any methods on that widget unless you initialize the widget again. If you want to remove an element, you can do so directly via .remove(), or you can modify the ancestor, widget via .html() or .empty() will be destroyed automatically.

widget

Some widgets generate wrapper elements, or elements that are disconnected from the original element. In the example below, widget will return the generated element. In a progressbar instance, there is no generated wrapper and the widget method returns the original element.

$( "#elem" ).progressbar( "widget" );

Events

All widgets have events related to their various behaviors to notify you when their status changes. For most widgets, when the event is fired, the name is prefixed with the widget name. For example, we can bind the change event of the progress bar() to trigger it once the value changes.

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

Each event has a corresponding callback, which is presented as an option. We can use the change callback of the progress bar (progressbar), which is equivalent to binding the progressbarchange event.

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

Public events

Most events are for specific widgets, and all widgets have a public create event. This event is fired when the widget is created.