Buttons & Dialogs for Nan & Bob's Online - Exercise

Contact Us or call 1-877-932-8228
Buttons & Dialogs for Nan & Bob's Online - Exercise

Buttons & Dialogs for Nan & Bob's Online

Duration: 20 to 30 minutes.

In this exercise, you will use what we have learned about buttons and dialogs to further flesh out the content on the Nan & Bob's Online site.

  1. Open GettingStartedjQuery/Exercises/dialogs.html in a file editor.
  2. Add a button from the home page to a join-mailing-list dialog.
  3. Add a div (with data-role="page") for the mailing list signup form.
  4. Add a simple form, with input of type email, to the mailing list dialog page; you need not handle the processing of the form submission.
  5. The home page and mailing list dialog should look like this: mailing list dialog
  6. Add a button from the contact page to a dialog showing driving directions.
  7. Add a div (with data-role="page") for the directions dialog.
  8. The contact page and directions dialog should look like this: directions dialog
  9. Test your work from a mobile browser.

Solution:

GettingStartedjQuery/Solutions/dialogs.html

Code Explanation:

We add two buttons to the content of the existing pages: a button from the home page to the mailing list dialog and a button (with icon) from the contact page to the directions dialog.

When linked to, both the mailing-list-signup and directions content show as dialogs, because the data-dialog attribute for each has value true.

The mailing list dialog presents a simple email-list signup form, with an input of type email. The directions dialog offers the user some driving directions as simple text content.

Next