Jump to content

How to navigate the pages of your app with jQuery Mobile

+ 1
  chco's Photo
Posted Jul 01 2011 07:09 AM

jQuery Mobile is a touch-optimized web framework for creating apps that look and behave consistently across many devices. The following excerpt from jQuery Mobile explains the page navigation options, including back buttons, that are available.
jQuery Mobile automatically manages the URLs of the various pages and dialogs in the application. Each page (that is to say, each element that has a data-role="page" attribute) will have its own unique URL within the application, allowing for bookmarking and deep linking into your application. The URL for each page is stored in the data-url attribute which jQuery Mobile attaches to each page’s containing element.

As the user moves through the application by tapping on links and buttons, jQuery Mobile updates the location.hash object, allowing the framework to use the browser’s native history capabilities to store the navigation information.

Note: Due to their modal nature, dialogs are not included in the history hash.

As a result, when you need to manually move from page to page in the application, you will need to use jQuery Mobile's changePage() method, so that the framework can correctly handle everything:

changePage( to , transition , back , changeHash )

  • to: one of the following:

    • a simple string denoting either an element ID or a filename

    • an array of two elements, with the first being a simple string denoting the element ID or filename of the page to transition from, and the second being a simple string denoting the page to transition to

    • an object with the following properties:

      • url: the url string of the desired page

      • type: the HTTP verb (“GET” or “POST”)

      • data: serialized parameters to send to the url

  • transition: the name of the desired transition

  • back: a Boolean indicating whether or not the transition should be in reverse

  • changeHash: a Boolean indicating whether or not the location.hash should be updated upon successful transition

changePage gives you direct access to the framework’s page management system so that you can perform more complex event-based paging, as shown below.

Example uses of changePage

// Go to #page2 when .back-button is clicked, show animation in reverse,
// and do not update the location hash.
$(".back-button").bind("click", function() {
  changePage("#page2", "flip", true, false);

// using changePage to submit a form
$("#my-form").bind("submit", function() {
  if (validateFormData()) {
      url: "form-processor.php",
      type: "post",
      data: myFormData
    }, false);

jQuery Mobile

Learn more about this topic from jQuery Mobile.

The future belongs to mobile web apps that function on a broad range of smartphones and tablets. Get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices. This concise book provides HTML5, CSS3, and Javascript code examples, screen shots, and step-by-step guidance to help you build a complete working app with jQuery Mobile.

See what you'll learn

0 Subscribe

0 Replies