jQuery Mobile - Listview

The Listview is used to display a list of items. data-role = "listview" attribute is included in the container to display the list in a vertical scrollable list.

Following table demonstrates the types of listview in detail.

Sr.No. Type & Description
1 Read-only, unordered

Include data-role = "listview" attribute to create a simple unordered list.

2 Read-only, ordered

Create ordered lists(ol) by including data-role = "listview" attribute in it.

3 Linked

When a hyperlink is defined in the list, then it is styled as a button.

4 Inset

Apply the inset look by including the attribute data-inset = "true".

5 Filter

The list can be filtered by adding the data-filter = "true" attribute.

6 Filter reveal

Add the data-filter-reveal = "true" attribute to hide the list item.

7 List dividers

Add data-role = "list-divider" atrribute to any list item to divide into a group of list items.

8 Autodividers

data-autodividers =" true" attribute is included to generate the dividers automatically to any listview.

9 Count bubbles

ui-li-count class define in element will help to include a count indicator in the list item at the right side.

10 Icons: Standard

Add attribute data-icon to set icon for a particular list item.

11 Icons: 16x16

Include class of ui-li-icon in the image element to add image of 16 X 16 pixels in the list item.

12 Thumbnails

In list item, the thumbnails is included on the left side.

13 Split buttons

Include a second link inside the li to create split list item.

14 Formatted content

Use heading and paragraph tags to add content in the proper hierarchy format.

15 Theme

data-theme attribute is added to include theme for the listview or to a particular list item.

16 Forms

In listview, the form element can be inserted for a group presentation.

17 Collapsible listview

data-role = "collapsible" attribute is wrapped in the container to make the listview collapsible.

18 Grouped collapsible with listviews

A grouped listview can be created inside the collapsible set using attribute data-role = "collapsibleset".

19 Full width collapsible listview

data-inset = "false" attribute is added to make full width collapsible set.

Kickstart Your Career

Get certified by completing the course

Get Started