jQuery UI works

jQuery UI contains many small parts to maintain state (Widget), therefore, it is a typical jQuery plugin uses a slightly different pattern. Its installation is similar to the installation of most of the jQuery plugin, jQuery UI widgets is based parts library (Widget Factory) created widget library provides a common API. So, as long as you learn how to use one, you know how to use other widgets (Widget). This tutorial will (progressbar) progress bar widget code examples describes common features.

installation

In order to track the status of components, we first introduce the full life cycle of the widget. When the widget is installed and life cycle begins. We just need to call the plug-in on one or more elements, that is installed widgets.

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

This will initialize each element in the jQuery object, in this case, the element id as "elem". Because we call the no-argument .progressbar() method, the widget is the default option in accordance with its initialization. We can pass a set of options at the time of installation, so that can override the default option.

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

The number of options when installing passed much according to our needs. We did not pass any options you use their default values.

Options are part of a small member state, so we can also set options after installation. We will follow the option describes this part of the method.

method

Since the widget has been initialized, we can query its status, or perform actions on the widget. All actions are performed after initialization in the form of a method call. To invoke a method on the widget, we can pass the name of the method to the jQuery plugin. For example, to call on the progress bar (progressbar) widget value method, we should use:

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

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

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

Like other jQuery methods, most of the widgets link method returns the jQuery object.

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

Public Method

Each widget has its own set of widgets that provide functionality based approach. However, there are ways that all have in common are widgets.

option

As we mentioned earlier, we can after initializing option to change the selection method. For example, we can call the option to change the method progressbar (progress bar) the value of 30.

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

Please note, this is before we call value examples of the method is different. In this example, we call option method, the option to change the value to 30.

We can also get the current value of an option.

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

In addition, we can give option pass an object method, update multiple options.

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

You may have noticed that option method has the jQuery code values and setter same flag, as .css() and .attr() . The only difference is that you must pass the string "option" as the first parameter.

disable

disable way to disable the widget. In the progress bar (progressbar) instances, this will change the style so that the progress bar is disabled.

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

Call disable method is equivalent to set the disabled option true .

enable

enable method is disable opposite approach.

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

Call enable method is equivalent to set the disabled option false .

destroy

If you no longer need the widget, you can destroy it, return to the original mark. This means that the termination of the widget lifecycle.

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

Once you destroy a widget, you can not call any method on the component, unless you re-initialize the widget. If you want to remove the element directly through .remove() , can also .html() or .empty() to modify the ancestors, the widget will be automatically destroyed.

widget

Some widgets generated wrappers element or elements connected to the original element is disconnected. In the following example, widget returns generated elements. In the progress bar (progressbar) example, does not generate the wrapper, widget method returns the original elements.

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

event

Events All widgets have a variety of behaviors associated with them, for when the state changes let you know. For most small parts, when the event is triggered, the name to the widget name as a prefix. For example, we can bind the progress bar () event of change, once the value changes triggered.

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

Each event has a corresponding correction, as an option for rendering. We can use the progress bar (progressbar) the change callback, 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 widgets have a common create events. The event is triggered when the widget is created.