Lists, Thumbnails, and Icons
CIS 136 Building Mobile Apps
1
List Views
CIS136 – Building Mobile Apps
2
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




3
Standard
Split button
Inset
HTML Lists
Unordered

<ul>
<li>Randy Harris</li>
<li>Monica Chaban</li>
<li>Jay Siddiqui</li>
<li>Dr. Pat Vacca</li>
</ul>
Ordered

<ol>
<li>Randy Harris</li>
<li>Monica Chaban</li>
<li>Jay Siddiqui</li>
<li>Dr. Pat Vacca</li>
</ol>
4
HTML Unordered List in a Page view
5
HTML Ordered List in a Page view
6
List View – standard – add data-role
Default appearance
7
List View – standard – add data-role, with link
Default appearance
8
List View – standard, link, transition
Default with transition
9
Inset list
CIS136 – Building Mobile Apps
10
Inset list
Standard

Uses the entire screen
width
11
Inset

Doesn’t use the entire
screen width
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
12
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

13
List item with a data-role attribute set to list-divider
Auto dividers


Divides list by first letter
List item with a data-autodividers set to true
14
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
15
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
16
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
17
RESIZED IMAGE
Split Button List
CIS136 – Building Mobile Apps
18
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

19
So its 2 <a href..> elements within each <li> element
Split Button List
20
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
21
Search Filters
CIS136 – Building Mobile Apps
22
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


23
Filter bar will appear before list
User can type one or two characters into filter box
Searching List Content
Notice the
icon has
changed
Case-insensitive
24
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 datafilterplaceholder=““ attribute on your ul element with the
value set to what you want displayed

25
You can also use search filters on inset lists
Using a list within a form

Instead of using a <div>
element to style the
form, you can use a list
26