Jquery mobile Chinese manual Ajax development edition-initialization

Initialization

Jqm 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 jqm initialization parameters, we need to first understandMobileinitEvent.

MobileinitEvent

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

For example:

1. $ (Document). BIND ("mobileinit", function (){
2. // Apply overrides her
3. });

Copy code

Two Methods for initializing configuration items

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

1. $ (Document). BIND ("mobileinit", function (){
2. $. Extend ($. Mobile ,{
3. Foo: bar
4. });
5. });

Copy code

Method 2: set each configuration item independently

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. Foo = bar;
3. });

Copy code

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:

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. activebtnclass = "UI-BTN-hover-";
3. });

Copy code

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. A jqm page must contain a page container that is activated, and other jqm page containers are 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: unfamiliarJqmCSSFramework 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:

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. activepageclass = "UI-page-custom ";
3. });

Copy code

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

Ajaxenabled (Boolean, default: True ):

At the same time, you can set whether the Ajax method is used for Link and form submission on the page. That is to say, both the form submission and the link in the tag are called using Ajax.

Boolean type. The parameter is true by default.

For example:

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. ajaxenabled = false;
3. });

Copy code

If Ajax is not used in your projectWe recommend that you set this parameter to false.

Ajaxformsenabled (deprecated Boolean, default: True ):

Set whether to use Ajax for form submission on the page.

Boolean type. The parameter is true by default.

Ajaxlinksenabled (deprecated Boolean, default: True ):

Set whether to use Ajax for links on the page.

Boolean. The parameter is true by default.

Autoinitialize (Boolean, default: True ):

Set whether the page is automatically initialized. When it is set to false, jqm will delay page rendering so that we can dynamically construct DOM elements of the page and other asynchronous operations.

After the page element is built, use $. Mobile. initializepage (); To start rendering the page.

Boolean type. The default value is true.

For example:

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. autoinitialize = false; // a rendering error occurs when you delete this row of configuration parameters.
3. });
4. $ (Function (){
5. Function newdom (){
6. $ ("Div [data-role = 'content']")
7. . Append ("<a href='web.html 'data-role = 'button'> link button </a> ");
8. $. Mobile. initializepage (); // render the page after loading.
9. }
10. SetTimeout (newdom, 500); // delayed Loading
11. });

Copy code

Defaulttransition (string, default: 'slide '):

Set the default page transition effect. If you do not want to use the transition effect, set the parameter to "NONE ".

Character type. The default parameter is "slide ".

Gradea (function that returns a Boolean, default: A function returning the value of $. Support. mediaquery ):

Used to determine whether a browser belongs to a browser.

Boolean type. The default value $. Support. mediaquery is used to return this Boolean value.

Loadingmessage (string, default: "loading "):

Set the text displayed in the loading prompt box. If it is set to false, the loading prompt box is not displayed.

Character type. The default value is "loadind ".

Metaviewportcontent (string, default: "width = device-width, minimum-scale = 1, maximum-scale = 1 "):

Set the Mata element used to adapt to the page proportion. If it is set to false, the Mata element is not added.

Character type. The default value is "width = device-width, minimum-scale = 1, maximum-scale = 1 ".

Nonhistoryselectors (string, default: "dialog "):

The specified data-rel parameter is not recorded in the hash table.

Since data-rel currently only has the "dialog" parameter, we recommend that you do not customize this item.

Subpageurlkey (string, default: "UI-page "):

Used to set the identifier of the hash table when a subpage is referenced.

Character type. The default value is "UI-page ".

Eddy blog:Http://www.uedcool.com