HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.
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.
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" );
Each widget has its own set of widgets that provide functionality based approach. However, there are ways that all have in common are widgets.
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
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
method is disable
opposite approach.
$( "#elem" ).progressbar( "enable" );
Call enable
method is equivalent to set the disabled
option false
.
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 ()
or .empty()
to modify the ancestors, the widget will be automatically destroyed.
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" );
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!" ); } });
Most events are for specific widgets, all widgets have a common create
events. The event is triggered when the widget is created.