- toPage (string or jQuery collection). The page to transition to.
- toPage (string). A file URL (“contact.html”) or internal element’s ID (“#contact”).
- toPage (jQuery collection). A jQuery collection containing a page element as its first argument.
- options (object). A set of key/value pairs that configure the changePage request. All settings are optional.
- transition (string, default: $.mobile.defaultTransition). The transition to apply for the change page. The default transition is “slide”.
- reverse (boolean, default: false). To indicate if the transition should go forward or reverse. The default transition is forward.
- changeHash (boolean, default: true). Update the hash to the page’s URL when page change is complete.
- role (string, default: “page”). The data-role value to be used when displaying the page. For dialogs use “dialog”.
- pageContainer (jQuery collection, default: $.mobile.pageContainer). Specifies the element that should contain the page after it is loaded.
- type (string, default: “get”). Specifies the method (“get” or “post”) to use when making a page request.
- data (string or object, default: undefined). The data to send to an Ajax page request.
- reloadPage (boolean, default: false). Force a reload of the page, even if it is already in the DOM of the page container.
- showLoadMsg (boolean, default: true). Display the loading message when a page is requested.
- fromHashChange (boolean, default: false). To indicate if the changePage came from a hashchange event.
- Example #1:
- //Transition to the “contact.html” page.
- $.mobile.changePage( “contact.html” );
- Contact Us
- Example #2:
- // Go to an internal “#contact” page with a reverse “pop” transition.
- $.mobile.changePage( ‘#contact’, { transition: “pop”, reverse: true } );
- Contact
- Example #3:
- /* Dynamically create a new page and open it */
- // Create page markup
- var newPage = $(“
- Hi
- Hello Again!”);
- // Add page to page container
- newPage.appendTo( $.mobile.pageContainer );
- // Enhance and open new page
- $.mobile.changePage( newPage );
- IMPORTANT: Ajax navigation will not be used for situations where you load an external link:
- Home
- Home
- Under these conditions, normal HTTP request processing will occur. Furthermore, CSS transitions will not be applied. As mentioned earlier, the framework is able to achieve smooth transitions by dynamically loading the “from” and “to” pages into the same DOM and then applying a smooth CSS transition. Without Ajax navigation the transition will not appear as smooth and the default loading message ($.mobile.loadingMessage) will not be shown during the transition.
Leave a Reply