Lists, Thumbnails, and Icons CIS 136 Building Mobile Apps

CIS136 – Building Mobile Apps List Views CIS136 – Building Mobile Apps

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

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>

HTML Unordered List in a Page view

HTML Ordered List in a Page view

List View – standard – add data-role Default appearance

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

List View – standard, link, transition Default with transition

CIS136 – Building Mobile Apps Inset list CIS136 – Building Mobile Apps

Inset list Doesn’t use the entire screen width Standard Inset Uses the entire screen width 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

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

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

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

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

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

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

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

Split Button List

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

CIS136 – Building Mobile Apps Search Filters CIS136 – Building Mobile Apps

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

Searching List Content Notice the icon has changed Case-insensitive

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

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