Implementation of page jump and loading of external pages in jQuery Mobile web development

This article mainly introduces the implementation of page jump and loading of external pages in jQuery Mobile web Development. it focuses on the use of changePage () and loadPage () methods. For more information, see ChangePage () page jump

jQuery.mobile.changePage( to [, options ] )

Jump from one page to another and use the changePage method of the $. mobile object. To use this method, click a link or submit a form. This method has two parameters.

To: is the first parameter, which is required and indispensable. Type: string or object.

String: absolute or relative URL. Example: ("about/us.html ")

Object:
Jquery selector object, for example: ($ ("# about ")).
An array [from, to] with two page references specified to jump to a known page. From is the page that can be viewed currently (or $. mobile. activePage ).
The object that sends form data, such as ({to: url, data: serialized form data, type: "get" or "post "}.

Options: The second parameter. optional. Type: Object

AllowSamePageTransition (Boolean value, default value: false)
By default, changePage () ignores requests that jump to an active page. If this parameter is set to true, it will be executed. Developers should note that some page transfer requests assume that the page from which a jump request comes is different from the target page, so there is no transfer animation.

ChangeHash (Boolean value, default value: true)
Determine whether the hash value in the address bar should be updated.

Data (string or object, default: undefined)
The data to be sent through an ajax request is only available when the to parameter of changePage () is an address.

DataUrl (string, default: undefined)
Update the URL of the browser address when page conversion is completed. If this parameter is not specified, the data-url attribute value of the page is used.

PageContainer (jQuery selector, default: $. mobile. pageContainer) specifies the container that should contain the page.

ReloadPage (Boolean value, default value: false)
Force refresh the page, even if the dom element in the page container is ready, force refresh. It is only available when the to parameter of changePage () is an address.

Reverse (Boolean value, default value: false)
Set the orientation of the page Transition animation. if it is set to true, it will lead to reverse transition.

Role (string, default: undefined)
Use the data-role value when displaying the page. By default, this parameter is undefined, meaning it depends on the @ data-role attribute of the element.

ShowLoadMsg (Boolean value, default: true) sets whether to display the loading information when loading an external page.

Transition (string, default: $. mobile. defaultPageTransition.

Type (string, default: get)
Specifies the method used for page requests ("get" or "post "). It is only available when the to parameter of changePage () is an address.

// Jump to the "about us" page with the slideup effect $. mobile. changePage ("about/us.html", "slideup"); // jump to the "confirm" page with the pop effect and do not record its history in the url hash $. mobile. changePage (".. /alerts/confirm.html "," pop ", false, false); // jump to the" search results "page and submit form data with the id of" search "$. mobile. changePage ({url: "searchresults. php ", type:" get ", data: $ (" form # search "). serialize ()}); // defines the page url, type, and data as variables for transmission. Var pageData = {url: formresults. php, type: 'GET', data: $ ('form # myform '). serialize ()}; $. mobile. changePage (pageData); // use changepage to load the third page var previousPage =$. mobile. activePage. data ('ui. prevPage '); $. mobile. changePage ([previousPage, anotherPreviousPage], 'pop ');

LoadPage () load external page

jQuery.mobile.loadPage( url [, options ] )

Load an external page, append its content, and insert it to the DOM

Url: The first parameter. Is required. Type: string or object.

Options: The second parameter. Is optional. Type: object.

AllowSamePageTransition (default: false)
Type: Boolean
By default, changepage () ignores the request to change the current page. This option is set to true to allow request execution. Some web page transitions that developers should pay attention to assume that the FromPage and ToPage settings for a changepage request are different, so they may not perform the animation as expected. Developers are responsible for providing appropriate transitions or disabling this particular situation.

ChangeHash (default: true)
Type: Boolean
If the hash value in the address bar should be updated

Data (default: undefined)
Type: data or string
Data to be sent and an AJAX page request

LoadMsgDelay (default: 50)
Type: Number
Forced delay (milliseconds) to display previous loading information. This is to allow a page to be accessed and retrieved from the cache without loading information.

PageContainer (default: $. mobile. pageContainer)
Type: jQuery selector
Page element to be included

ReloadPage (default: false)
Type: Boolean
Force refresh the page, even if the dom element in the page container is ready, force refresh. It is only available when the to parameter of changePage () is an address.

Role (default: undefined)
Type: string
Use the data-role value when displaying the page. By default, this parameter is undefined and depends on the @ data-role attribute of the element.

ShowLoadMsg (default: true)
Type: Boolean
When loading an external page, set whether to display the loading information.

Transition (default: $. mobile. defaultPageTransition)
Type: string
Transition when using the displayed page

Type (default: "get ")
Type: string
Specifies the method used for page requests ("get" or "post "). It is only available when the to parameter of changePage () is an address.

Load an external page, increase its content, and insert it to the DOM. When this method is called the internal changepage () function, its first parameter is a URL. This function does not affect the current page. you can load the page in the background. This function returns an object, obtains the extension commitment, is enhanced on this page, and is inserted into the document for resolution.
Load the "about/us.html" page to the DOM

 
  
  JQuery. mobile. loadPage demo