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 ListGive 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 ListGive 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 ListGive 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 DividersGive 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 AutoDividersGive 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 ListsGive 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
|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 IconsGive 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 ListGive 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.