Jquery mobile Chinese manual Ajax development edition (1)

ArticleDirectory

• Initialization

Initialization

Jquery mobile (hereinafter referred to as JM) automatically initializes the default configuration items during loading, so that we do not need to spend a lot of time learning and configuring these parameters, greatly improving the development efficiency.

However, in some cases, we still need to customize these parameters because of project requirements. Before learning the JM initialization parameters, we need to first understandMobileinitEvent.

Mobileinit event

The loading event of JM is different from that of the common jquery plug-in.Document. ReadyBefore the event. Therefore, when we need to adjust the default runtime parameters of JM, we need to set these parameters before the document. Ready event. jm provides usMobileinitEvents to be executed before loadingCode.

For example:

$ (Document). BIND ("mobileinit", function (){

// Apply overrides her

});

Two Methods for initializing configuration items

Method 1: Use jquery's$. ExtendMethod To set multiple configuration items

 

$ (Document). BIND ("mobileinit", function (){

$. Extend ($. Mobile ,{

Foo: bar

});

});

Method 2: set each configuration item independently

$ (Document). BIND ("mobileinit", function (){

$. Mobile. Foo = bar;

});

Initialize configuration items

The following configuration items can be initialized through the $. mobile object:

Activebtnclass (string, default: "UI-page-active "):

Set the CSS style when the button is activated.

String type. By default, the parameter is referenced in the style sheet"UI-page-active".

Coverage: trigger status of components such as buttons, list views, and select menus.

For example:

$ (Document). BIND ("mobileinit", function (){

$. Mobile. activebtnclass = "UI-BTN-hover-";

});

Define the style of the button activation status as "UI-BTN-hover-"

Activepageclass (string, default: "UI-page-active "):

Set the style of the current activation page. One JM page must have a page container that is activated, and other JM page containers will be hidden,

String type. By default, the parameter is referenced in the style sheet"UI-page-active", StyleUI-page-activeIs used to set the page to the display status style. Therefore, to customize this style, you must declare the following attributes in the style:"Display: block! Important; overflow: visible! Important ;".(Note: unfamiliarJMCSSFramework friends often encounter situations where custom styles do not work. This is generally because of custom styles and the original CSSThe inheritance relationships of the framework are different. You can add a style that does not work! ImportantTo improve the priority of custom styles)

For example:

$ (Document). BIND ("mobileinit", function (){

$. Mobile. activepageclass = "UI-page-custom ";

});

Define the style of the page activation status as "UI-page-custom", "UI-page-custom"Must define "display: block! Important; overflow: visible! Important ;"Attribute.