Adding Lists - Exercise

Contact Us or call 1-877-932-8228
Adding Lists - Exercise

Adding Lists

Duration: 20 to 30 minutes.

In this exercise, you will add a list of books for purchase to the Nan & Bob's Online site.

  1. Open WidgetsUI/Exercises/lists.html in a file editor.
  2. In the "Books" page, add a list of four books and give them dummy titles.
  3. Allow the user to filter the list with a search field at top.
  4. Each book listing should show a thumbnail image at left (use the images provided in the "images" directory), the title and author, and a plus icon at right.
  5. Clicking the thumbnail image or book title brings the user to a detail page (provided for you) with a "back" button at upper right.
  6. Clicking the plus icon brings the user to a dialog asking them to confirm their intent to purchase. Clicking "yes" brings the user to a checkout page (with no form), which you will need to create; clicking "no" returns the user to the book-list page.
  7. Test your work in a mobile browser; the results should look like this: Lists exercise

Solution:

WidgetsUI/Solutions/lists.html

Code Explanation:

We use a split-button list to present the books available for purchase to the user. Attribute data-filter="true" adds the filter functionality; attribute data-split-icon="plus" sets the right-side icon.

The first link (pointing to the appropriate detail page) in each list item includes an image, which displays flush left, and the book title and author. The second link (pointing to the confirm dialog) in the list item becomes the icon.

The dialog presents two buttons: "yes" points to the checkout page; "no" points back to the book-list page.

Next