User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

Components of jQuery Mobile 2  Data attributes  Pages, Dialogs, and Transitions  Toolbars, Buttons, and icons  Content Formatting  Grids  Content blocks  Collapsible sets  ListViews  Forms  Events & Methods  Most are used automatically  do not need to code them yourself

List Views CIS136 – Building Mobile Apps 3

List View 4  A list of items that link to other pages  Follows basic list structure of HTML  or element with data-role set to “listview”  Within the or elements  elements  within the elements, elements with the href= attribute  Styles are  Standard  Split button  Inset

List View - standard 5 Default appearance

List View - standard 6 Numbered appearance

List View - standard 7 Default with transition

Split Button List CIS136 – Building Mobile Apps 8

Split Button list 9  A list of items that have more than one link in them  First element takes the majority of space of the list item leaving the second element a small section with space for an icon on the right side of the list item  So its 2 elements within each element

Split Button List 10

Split Button list 11  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

Inset list CIS136 – Building Mobile Apps 12

Inset list 13  A standard list with a data-inset attribute set to true  Looks like an imbedded list with rounded corners

List Extras CIS136 – Building Mobile Apps 14

List Extras 15  Dividers  Count Bubbles  Icons  Searching Lists  Formatting Lists

Dividers 16  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.

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

Icons 18  Icon images are similar to thumbnails only much smaller  Where the thumbnail was an 80×80 pixel image, an icon is a 16×16 pixel image  use resized images to save you from some possible image overlap issues  on the img element add a class="ui-li- icon" attribute

Searching List Content 19  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 tag  Filter bar will appear before list  User can type one or two characters into filter box

Searching List Content 20 Notice the icon has changed

Searching List Content 21  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 22  Instead of using a element to style the form, you can use a list