The basic building block of a jQuery Mobile app is the Page, which can be specified by adding data-role=”page” to a <div> inside of the <body> tag. Pages can have a header and a footer, and the content of the page will be specified in a content div inside the page:
|1 2 3 4 5 6 7 8 9 10||
Pages can be declared directly in the <body> of your main HTML file, or loaded externally through an AJAX request. We can link pages that exist in the same HTML file by specifying the id of the page as the hash URL value of a button (or other linkable component):
This button will link to a page with the id “page2″. In our example, page 2 looks like this:
|1 2 3 4 5 6 7 8 9 10 11 12||
When we click “Go to Page 2″ we transition over to the page with id “page2″ using the default jQuery Mobile transition (more on that in a minute).
Notice we have a back button in the header of Page 2. When tapped, this button will “reverse” the transition (for example, slide left instead of right) and also go back in the browser’s history. We add data-direction=”reverse” to signal this transition is a reverse transition, and data-rel=”back” to signal that this button goes back in the browser’s history.
jQuery Mobile supports a variety of transitions. Starting in version 1.1.0 which has not been released at the time of this post, the default transition will be changing to the “fade” transition. In older versions of jQuery Mobile the default transition is a left-to-right “slide”. The jQuery Mobile docs has a comprehensive list of transitions. Note: the “flow” and “turn” transitions are new as of 1.1.0-rc.1.
Using these simple concepts, we can create a very interactive app linked together with smooth transitions and proper browser behavior. In the next set of posts on jQuery Mobile, we will cover externally linked pages and more advanced navigation.
Get the full HTML here: https://gist.github.com/2093897
Want to make jQuery Mobile app development faster and easier? Try Codiqa, the drag-and-drop jQuery Mobile prototype builder!