Search within TutorialsPark

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

Attribute Description
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 Formatting

Give 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 Bubbles

Give 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 Emphasis

Give 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 Aside

Give 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 List

Give 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.

Syntax: jQuery Mobile Hide Dividers

Give it a TRY! » Note: List dividers on the left list cannot be removed, since data-hide-dividers="false" by default.