Introduction to jquery jquery UI basic work process

This article describes the basic work process of the jquery UI component, taking the process bar (ProgressBar) as an example to introduce the basic process of the work of the jquery UI component.

Class

Most jquery UI components can maintain their state, so in order to be able to track the state of the UI component, the jquery UI component also has a lifecycle, starting with initialization, in order to initialize a UI component that invokes the UI component (plug-in) method in an HTML element. Like what

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

This method initializes the Id=elem element because we call the ProgressBar without parameters, so the default property is used to initialize the process bar. We can modify the default values for the jquery UI component by passing in the configuration method. Like what:

$ ("#elem" 

). ProgressBar ({value:20});

You can also pass in multiple parameters at once to initialize the jquery UI component, other properties that are not configured, or use their default values. These properties are also part of the jquery UI component state. After initialization, if you need to modify these properties, you can change them by option method.

Method

After initializing the jquery UI component, we can query the state properties of the UI component, and each initialized UI component can call its methods by passing in the method name, for example, the value method that invokes the process bar as follows:

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

If this method can have parameters, pass the parameter directly after the method name, for example, set value to 40

$ ("#elem" 

). ProgressBar ("value", 40);

Like the jquery method chain described earlier, the jquery UI approach also supports multiple methods, such as:

$ ("#elem")   
   . ProgressBar ("value")   
   . addclass ("Almost-done");

Common methods

For most jquery UI components, some methods are supported, such as:

Option method

As mentioned earlier, if you need to modify some attribute values after the UI component is initialized, you can use the option method, for example, to modify the value of the ProgressBar.

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

Note that this is different from the previous call to the value method, which is to modify the configuration item value of 30.

If you need to get a value for a configuration item, use a call without parameters: such as:

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

In addition, if you need to modify more than one configuration item at a time, you can pass the method of passing in the object, such as:

$ ( 

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

Diable method

This method disable a UI component, such as:

$ ("#elem"). ProgressBar ("Disable");

This method disable the process bar and modifies its style to make it look invalid. This method is equivalent to setting the Disable property to True.