How the jQuery UI works

How jQuery UI works

The jQuery UI contains many state-maintaining widgets (widgets) that differ slightly from typical jQuery plug-in usage patterns. T he jQuery UI widget is installed in a similar way to most jQuery plug-ins, and the jQuery UI widget is created from the Widget Factory, which provides a common API. So as soon as you learn to use one of them, you know how to use the other widgets.

This section introduces common features through the Progressbar widget code instance.

Installation

To track the status of a widget, let's start with the full life cycle of the widget. W hen the widget is installed, the life cycle begins. We only need to call the plug-in on one or more elements, i.e. the widget is installed.

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

This initializes each element in the jQuery object, in this case the element id is "elem". B ecause we call the .progressbar() the widget is initialized according to its default options. We can pass a set of options at installation time so that the default options can be override.

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

The number of options passed at installation depends on our needs. Any options we don't pass use their default values.

Options are part of the widget state, so we can also set them after installation. We'll cover option in a later option method.

Method

Now that the widget has been initialized, we can query its status or perform actions on the widget. A ll initialized actions take the form of method calls. I n order to call a method on the widget, we can pass the name of the method to the jQuery plug-in. For example, in order to call the value method on the progress bar value we should use:

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

If the method accepts the argument, we can pass the argument after the method name. For example, in order to 40 value method, we can use the following:

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

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

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

A common approach

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

option

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

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

Note that this is different from the instance where value the value method earlier. 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 option at once by passing an object to the option method.

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

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

disable

disable disables widgets. In the progress bar instance, this changes the style to make the progress bar appear disabled.

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

Calling disable is equivalent to setting the disabled option true

enable

enable method is the opposite of the disable method.

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

Calling enable method is equivalent to setting the disabled option false

destroy

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

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

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

Widgets

Some widgets generate wrapper elements, or elements that are disconnected from the original element. I n the following example, widget the generated element. In the progress bar instance, there is no generated wrapper, and widget returns the original element.

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

Event

All widgets have events related to their various behaviors to notify you when the state changes. F or most widgets, when an event is triggered, the name is prefixed with the widget name. For example, we can bind the change event of a progress bar and trigger it as soon as the value changes.

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

Each event has a corresponding callback rendered as an option. We can use the change callback of the change which is equivalent to binding progressbarchange event.

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

Public events

Most events are for specific widgets, all of which have a common create event. The event is triggered when the widget is created.