jQuery Mobile : Formatting Lists
Learn how to use jQuery Mobile to format Lists using data attributes
jQuery Mobile: Formatting Lists
jQuery Mobile specifies a number of data-attributes which can be used to format list items, these formatted list can serve various purposes.
Table: jQuery Mobile - Attributes for Formatting List Items
|data-role||To set the list-divider, the list item acts as spacer.|
|data-icon||To set the icon for a list item.|
|data-theme||To apply a swatch theme to the list item.|
|data-divider-icon||To apply a swatch theme to a list divider.|
jQuery Mobile: Using List Dividers
jQuery Mobile can be used to create a List Divider by setting the value of data-role attribute to list-divider
Its a good structure to create list which provides the user with the context of the list's contents.
Example: jQuery Mobile - Attributes for List FormattingGive it a TRY! » Note: To set appearance of just one element, apply attribue data-theme directly to that element.
jQuery Mobile: Adding Count Bubbles to List
jQuery Mobile can be used to create a list with numerical indicators called count bubbles to provide information to user how many items are available. Eg : Emails, Notifications, messages etc.
A count bubble is created by adding an additional child element to the contents of the li element.This child element hold the value to be assigned to the ui-li-count class.
Syntax: jQuery Mobile List with Count BubblesGive it a TRY! » Note:The meaning of the numbers must be self evident, no need to provide explanation
jQuery Mobile: List with Text Emphasis
jQuery Mobile allows you to create list with different levels of Emphasis, creating a list item with a headline and some supporting text details.
Syntax: jQuery Mobile List with Text EmphasisGive it a TRY! » Note: In list , H1 element denotes the name while p element denotes the detailed information.
jQuery Mobile: Adding an Aside
jQuery Mobile can be used to create an aside which can act as an alternative to count bubbles.
To add an aside to your list, add the child to the li element which contains the information you wish to display and that is added to the ui-li-aside class.
Syntax: jQuery Mobile Adding an AsideGive it a TRY! » Note: The style and purpose of aside is different than bubble count
jQuery Mobile: Filterables List
jQuery Mobile filterable List can be created using the attribute data-filter="true" for the container of the list.
Syntax: jQuery Mobile Filterable ListGive it a TRY! » Note: To Learn more about filters visit the filter tutorials.
jQuery Mobile: Hide Dividers
jQuery Mobile provides an extension called hideDividers , which can be used to hide list dividers, when its value is set as true.
When list items are clicked, the script applies the class ui-screen-hidden to hide the items and uses refresh method to update the view. It hides dividers which are followed immediately by another divider.