More Pages & Transitions for Nan & Bob's Online - Exercise

Contact Us or call 1-877-932-8228
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:

Nan & Bob Online - more pages

  1. Open GettingStartedjQuery/Exercises/transitions.html in a file editor.
  2. Add a div with data-role="navbar" to the header of the page div in the exercise file.
  3. Add links within the navbar to #home, #books, and #contact.
  4. From the jQuery Mobile docs, choose appropriate icons for each link; use the data-icon attribute on the a tag to specify the icon.
  5. 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.
  6. Set the transition from "Books" to "Home" and from "Contact" to "Home" to be the slideup transition.
  7. Use $.mobile.defaultPageTransition in the head of the document to set the default page transition to flip.
  8. Test your work by viewing the pages in a mobile browser.

Solution:

GettingStartedjQuery/Solutions/transitions.html

Code Explanation:

We use $.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 #home div with links to #home, #books, and #contact.

We add two new divs with data-role="page", one each for the #books and #contact pages.

We set, using data-transition="slideup", a custom page transition between the #books and #home pages and between the #contact and #home pages

Next