jQuery UI How It Works

jQuery UI contains many stateful widgets (Widget), so it is slightly different from the typical jQuery plugin usage pattern. Its installation is similar to that of most jQuery plugins. jQuery UI widgets are based onWidget Factorycreated, and the Widget Factory provides a common API. So once you learn to use one of them, you know how to use the other widgets. This tutorial will useprogressbarwidget code examples to introduce common features.

Installation

In order to track the state of the widget, we first introduce the full lifecycle of a widget. The lifecycle begins when the widget is installed. We only need to call the plugin on one or more elements to install the widget.

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

This will initialize each element in the jQuery object. In this example, the element id is "elem". Because we call the no-argument.progressbar()method, the widget will be initialized according to 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 by our needs. Any options we do not pass will use their default values.

Options are part of the widget's state, so we can also set options after installation. We will introduce this in theoptionMethods section.

Methods

Now that the widget is initialized, we can query its state or perform actions on it. All post-initialization actions are in the form of method calls. To call a method on a widget, we can pass the method name to the jQuery plugin. For example, to call the progressbar widget'svaluemethod, we should use:

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

If the method accepts parameters, we can pass parameters after the method name. For example, to pass parameters for the40Givevaluemethod, we can use:

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

Like other methods in jQuery, most widget methods return jQuery objects for chaining.

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

Public Methods

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

option

As we mentioned earlier, we can change options after initialization through theoptionmethod. For example, we can call theoptionmethod to change the progressbar's value to 30.

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

Note that this is different from the previous instance where we called thevaluemethod. In this instance, we call theoptionmethod, changing the value option to 30.

We can also get the current value of an option.

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

In addition, we can pass to theoptionmethod an object to update multiple options at once.

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

You may have noticed that theoptionmethod has the same signature as the getter and setter in jQuery code, just like.css()and.attr(). The only difference is that you must pass the string "option" as the first parameter.

disable

disablemethod disables the widget. In the progressbar instance, this changes the style to display the progress bar as disabled.

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

Callingdisablemethod is equivalent to setting thedisabledoption totrue。

enable

enableThe method isdisablethe opposite of the method.

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

Callingenablemethod is equivalent to setting thedisabledoption tofalse。

destroy

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

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

Once you destroy a widget, you cannot call any methods on it unless you re-initialize this widget. If you want to remove the element, you can directly use.remove(), or you can use.html()or.empty()to achieve this, and the widget will be destroyed automatically.

widget

Some widgets generate wrapper elements, or elements that are disconnected from the original element. In the example below,widgetwill return the generated element. In the progressbar instance, there is no generated wrapper,widgetmethod returns the original element.

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

Events

All widgets have events related to their various behaviors, used to notify you when the state changes. For most widgets, when an event is triggered, the name is prefixed with the widget name. For example, we can bind the change event of the progressbar, which is triggered whenever the value changes.

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

Each event has a corresponding callback, presented as an option. We can use the progressbar'schangecallback, which is equivalent to binding theprogressbarchangeevent.

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

Public Events

Most events are specific to particular widgets; all widgets have a commoncreateevent. This event is triggered when the widget is created.

Other Extensions