Search within TutorialsPark

jQuery Mobile : Lists

Learn how to use jQuery Mobile to create list of various types

jQuery Mobile: Simple List

jQuery Mobile simple List can be created using the attribute data-role="listview" within the list element container i.e ul or ol list.

Syntax: jQuery Mobile Simple List

Give it a TRY! » Note: Links to the List elements can be both internal as well as external

jQuery Mobile: Numbered List

jQuery Mobile Numbered List can be created using the attribute data-role="listview" within an unordered list i.e ol element

Syntax: jQuery Mobile Numbered List

Give it a TRY! » Note:The List can also be nested.

jQuery Mobile: Readable List

jQuery Mobile Readable List can be created removing link element from the List, you can also add counter and other features just like all other lists.

Syntax: jQuery Mobile Readable List

Give it a TRY! » Note: Readable Links are used to display static content, no navigation links

jQuery Mobile: Creating Dividers

jQuery Mobile List Dividers are used to organise the list contents better within certain grouping based on any criteria.

A List divider can be created by adding the attribute data-role="list-divider" to any list item and then specifying its name.

Syntax: jQuery Mobile Creating Dividers

Give it a TRY! » Note:The Divider is based on Alphabetic Character, grouping items with same initials

jQuery Mobile: Lists With Auto Dividers

jQuery Mobile provides you an option to generate dividers automatically, the uppercased first letter of the item is converted into the Divider Header.

Syntax: jQuery Mobile List with AutoDividers

Give it a TRY! » Note:The Name of the divider is the uppercased first letter of the List Items within

jQuery Mobile: Navigating using List Links

jQuery Mobile allows you to create lists of various types serving different requirements

In the demo below, we create a basic list which allows the user to navigate to by clicking on those links

Example: jQuery Mobile - Navigation Lists

Give it a TRY! » Note: All the links are internal, you can use external links as well.

jQuery Mobile: Formatting the List

jQuery Mobile specifies a number of data attributes which can be used to format lists.

Table: jQuery Mobile - Attibutes of Formatting List

Method Description
data-filter When set as true, the text box is displayed to the user to filter the contents of the list. The default value is false.
data-filter-placeholder To specify a string to be used as placeholder within the textbox when the value of data-filter is set as true.
data-filter-theme To specify the swatch theme to be used for the text box when the value of data-filter is set as true.
data-inset When set as true, the list with rounded corners is displayed.A value of false, creates list with squared-off edges. Default false.
data-split-icon To specify an icon to be used to create split button.

jQuery Mobile: Creating Inset List with Icons

jQuery Mobile default list span across the entire width of the element and have square corners, to overcome this you can create an inset list with rounded corners as well.

An inset list can be created by setting the value of the attribute data-inset to true.

Syntax: jQuery Mobile Inset List with Icons

Give it a TRY! » Note: The attribute data-insetis applied to either the element ul and ol .

jQuery Mobile: Creating Split Lists

jQuery Mobile can also be used to create lists which can perform two actions for each item in the list. In a split list, the items are split into two sections, clicking and tapping on each section leads to a different action.

jQuery Mobile split list has two a element within li elements, it splits each of the list item into parts and then inserts a vertical divider between the sections

Syntax: jQuery Mobile Creating Split List

Give it a TRY! » Note: The two links on the list items are used to navigate to different pages.

jQuery Mobile: Thumbnail Lists

jQuery Mobile Thumbnails are created using the a Thumbnail Image along with a List to make it more descriptive.

Syntax: jQuery Mobile Thumbnail Lists

Give it a TRY! » Note: Additionally a Split List is added to provide multiple links within a single list item.