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.
- Open GettingStartedjQuery/Exercises/dialogs.html in a file editor.
- Add a button from the home page to a join-mailing-list dialog.
- Add a div (with data-role="page") for the mailing list signup form.
- 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.
- The home page and mailing list dialog should look like this:
- Add a button from the contact page to a dialog showing driving directions.
- Add a div (with data-role="page") for the directions dialog.
- The contact page and directions dialog should look like this:
- Test your work from a mobile browser.
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
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.