JQuery getting started tutorial (20): basic working process of jQuery UI

Most JQuery Ui components can be initialized to maintain their status. Therefore, to track the status of the UI component, the jQuery UI component also has a lifecycle, starting from initialization, to initialize a UI component, you can call the UI component (plug-in) method on an HTML element ., For example, 1 $ ("# elem "). progressbar (); this method initializes the element of id = elem, because we call progressbar without parameters, so the default attribute will be used to initialize the process bar. You can pass in the configuration method to modify the default value for the jQuery UI component. For example: 1 $ ("# elem "). progressbar ({value: 20}); you can also input multiple parameters at a time to initialize the jQuery UI component. The default value is used for other attributes that are not configured. These attributes are also part of the jQuery UI component status. After initialization, you can use the option Method to modify these attributes. After the jQuery UI component is initialized, We can query the status attributes of the UI component. Each initialized UI component can call its method by passing in the method name, for example, the method for calling the value of a process entry is as follows: 1 $ ("# elem "). progressbar ("value"); if this method can have parameters, pass in the parameter directly after the method name. For example, set the value to 40 $ ("# elem "). progressbar ("value", 40); like the jQuery method chain described earlier, the jQuery UI method also supports concatenation of multiple methods, for example: 1 $ ("# elem") 2. progressbar ("value", 90) 3. addClass ("almost-done"); general methods are supported by some methods for most jQuery UI components. For example, the option method, as mentioned earlier, after the UI component is initialized, if you need To modify some attribute values, you can use the option method, for example, to modify the value of progressbar, 1 $ ("# elem "). progressbar ("option", "value", 30); note that this is different from the previous call to the value method. In this example, you want to modify the configuration item value to 30. to obtain the value of a configuration item, use a call without parameters, for example, 1 $ ("# elem "). progressbar ("option", "value"); if you need to modify multiple configuration items at a time, you can pass in the object method, such as: 1 $ ("# elem "). progressbar ("option", {2 value: 100, 3 disabled: true 4}); The diable method disable a UI component, such as: 1 $ ("# elem "). progressbar ("disable "); And modify the Style to make it look invalid. This method is equivalent to setting the disable attribute to true. enable method enable UI components, such as: 1 $ ("# elem "). progressbar ("enable"); this method is equivalent to setting the disable attribute to false. destroy method if you do not need a UI component, you can call the destroy () method, which restores the corresponding HTML element to its original state (without the tag display before jQuery ). This also ends the life cycle of jQuery UI. Once you terminate the UI component, you cannot call the method of the UI component. If you delete this HTML element, jQuery automatically terminates. Widget method some UI components create a wrapper element or a new element that is not associated with the original element. In this case, the widget method returns the new elements generated. For Progressbar, no HTML element is generated. This method returns the original HTML element. 1 $ ("# elem"). progressbar ("widget"); all the UI components of the event have events to notify them of status changes. For most UI components, when an event occurs, the event name is prefixed with the UI component name. For example, when the Progressbar value changes, bind an event processing method: 1 $ ("# elem "). bind ("progressbarchange", function () {2 alert ("The value has changed! "); 3}); each event has a corresponding callback function, which is defined as a configuration item, therefore, we can directly mount the change callback function of the Progressbar instead of binding it to the Progressbarchange event, for example, 1 $ ("# elem "). progressbar ({2 change: function () {3 alert ("The value has changed! "); 4} 5}); although each UI component supports different events, the create event is supported by each UI component, this event is triggered immediately after the UI component is created.