Basic jQueryUI Work Process

Source: Internet
Author: User
Most JQueryUi components can be initialized to maintain their status. Therefore, to track the status of the UI component, the jQueryUI component also has a life cycle, starting from initialization and initializing a UI component, generally, the UI component (plug-in) method is called on an HTML element ., For example, 1 $ (# elem). progressbar (); this method

Initialization

Most JQuery Ui components can maintain their statuses. Therefore, to track the status of the UI component, the jQueryUI component also has a life cycle, starting from initialization, to initialize a UI component, generally, the UI component (plug-in) method is called on an HTML element ., For example

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

This method initializes the element of id = elem. Because we call progressbar without parameters, we will use the default attribute to initialize process entries. You can pass in the configuration method to modify the default value for the jQueryUI component. For example:

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

You can also input multiple parameters at a time to initialize the jQuery UI component. For other attributes that are not configured, use the default value. These attributes are also part of the jQueryUI component status. After initialization, you can use the option Method to modify these attributes.

Method

After the jQueryUI 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, you can directly input parameters after the method name. For example, set the value to 40.

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

Like the jQuery method chain described earlier, jQuery UI methods also support concatenation of multiple methods, such:

1 $ ("# elem ")

2. progressbar ("value", 90)

3. addClass ("almost-done ");

General Method

For most jQuery UI components, some methods are supported, such:

Option Method

As mentioned above, after the UI component initialization, if you need to modify some attribute values, you can use the option method, such as visualization topic, to modify the value of progressbar,

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

Note that this is different from calling the value method. In this example, you want to modify the value of the configuration item to 30.

To obtain the value of a configuration item, use a call without parameters: for example:

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

In addition, if you need to modify multiple configuration items at a time, you can pass in the object method, such:

1 $ ("# elem"). progressbar ("option ",{

2 value: 100,

3 disabled: true

4 });

Diable Method

This method disable a UI component, such:

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

This method disable the process bar, site group software, and modify its Style to make it look invalid. This method is equivalent to setting the disable attribute to true.

Enable Method

Enable UI components, such:

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 (not displayed using the tag prior to jQuery ). This also ends the lifecycle of jQueryUI. 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 ");

Event

All UI components 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 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 });

Common events

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.

Share:

Shift _ cyclically retrieve location parameters

① Shift command will re-allocate the location parameter, in fact, it is to move all the location parameters to the left. $1 --- $2, $2 --- $3, $3 --- $4, and so on. the original $1 disappears, but $0 (Script Name) does not change. if a large number of location parameters are passed to the script, the shift command allows you to access the number of location parameters

OpenWBS Open Enterprise Business website construction system

In the ASP open-source enterprise website building system, OpenWBS open business website building system and ASPCMS enterprise website management system are mostly used. As two popular source codes, their functions also have their respective lengths. Let's take a look at the Functional Comparison between them today. In terms of operating environment, ASPCMS is a website content management system developed based on ASP, but only supports

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.