1. Lists, Thumbnails, and Icons
CIS 136 Building Mobile Apps

2. CIS136 – Building Mobile Apps
List Views
CIS136 – Building Mobile Apps

3. List View A list of items that link to other pages
Great for menus
Follows basic list structure of HTML
<ul> or <ol>element with data-role set to “listview”
Within the <ul> or <ol> elements
<li> elements
within the <li> elements, <a> elements with the href= attribute
Styles are
Standard
Split button
Inset

4. HTML Lists Unordered Ordered <ul> </ul> <ol>
<li>Randy Harris</li>
<li>Monica Chaban</li>
<li>Jay Siddiqui</li>
<li>Dr. Pat Vacca</li>
</ul>
Ordered
<ol>
</ol>

5. HTML Unordered List in a Page view

6. HTML Ordered List in a Page view

7. List View – standard – add data-role
Default appearance

8. List View – standard – add data-role, with link
Default appearance

9. List View – standard, link, transition
Default with transition

10. CIS136 – Building Mobile Apps
Inset list
CIS136 – Building Mobile Apps

11. Inset list Doesn’t use the entire screen width
Standard
Inset
Uses the entire screen width
Doesn’t use the entire screen width

12. Inset list Doesn’t use the entire screen width
A standard list with a data-inset attribute set to true
Looks like an imbedded list with rounded corners

13. Inset list dividers
Data-role of “list-divider” will change the display styles to help create grouped content
the text within the element is displayed like a title to help users understand the grouping
List item with a data-role attribute set to list-divider

14. Auto dividers Divides list by first letter
List item with a data-autodividers set to true

15. Count Bubbles
Displays the number of items in a list item that represents a group
Add a <span> element after the content for the <a> element, and set the class for the <span> element to ui-li-count

16. Icons Icon images are similar to images only much smaller
Where the image is a 160x160 pixel image, an icon is a 16×16 pixel image
on the img element add a class="ui-li-icon" attribute

17. Thumbnails Thumbnail images are similar to images only much smaller
use resized images to save you from some possible image overlap issues
on the img element add a class="ui-li-icon" attribute
RESIZED IMAGE

18. CIS136 – Building Mobile Apps
Split Button List
CIS136 – Building Mobile Apps

19. Split Button list A list of items with multiple actions
First <a> element takes the majority of space of the list item leaving the second <a> element a small section with space for an icon on the right side of the list item
So its 2 <a href..> elements within each <li> element

20. Split Button List

21. Split Button list
Can change the indicators that’s shown for each list item
Add attribute data-split-icon, and set it to one of the icon values

22. CIS136 – Building Mobile Apps
Search Filters
CIS136 – Building Mobile Apps

23. Searching List Content
If there is a large number of items in the list you may want to include a search filter to help users navigate through your selection to find what they need
Add search filter bar by setting the attribute data-filter to true on the <ul> tag
Filter bar will appear before list
User can type one or two characters into filter box

24. Searching List Content
Notice the icon has changed
Case-insensitive

25. Searching List Content
Initial text inside the search filter bar can be changed from the default “Filter items...” to something else
To change the text, you need to include the data- filterplaceholder=““ attribute on your ul element with the value set to what you want displayed
You can also use search filters on inset lists

26. Using a list within a form
Instead of using a <div> element to style the form, you can use a list