More Pages & Transitions for Nan & Bob's Online - Exercise
More Pages & Transitions for Nan & Bob's Online
Duration: 20 to 30 minutes.
In this exercise, you will add a top navbar to the Nan & Bob's Online site, build new pages for "Books" and "Contact", and set specific page transitions. The solution should look something like this:
- Open GettingStartedjQuery/Exercises/transitions.html in a file editor.
- Add a div with data-role="navbar" to the header of the page div in the exercise file.
- Add links within the navbar to #home, #books, and #contact.
- From the jQuery Mobile docs, choose appropriate icons for each link; use the data-icon attribute on the a tag to specify the icon.
- Copy the existing page div and paste two new copies; change one pasted copy to become the "Books" page and the other to become the "Contact" page. Be sure to set the id of each page div appropriately.
- Set the transition from "Books" to "Home" and from "Contact" to "Home" to be the slideup transition.
- Use $.mobile.defaultPageTransition in the head of the document to set the default page transition to flip.
- Test your work by viewing the pages in a mobile browser.
$.mobile.defaultPageTransition = 'flip'; to set the default page transition to
flip in a
script block in the
head of index.html; note that the script comes after we link the jQuery library but before we link jQuery Mobile.
We add a navbar to the
div with links to
We add two new
data-role="page", one each for the
We set, using
data-transition="slideup", a custom page transition between the
#home pages and between the