Listview Widget


Listview Widgetversion added: 1.0

Description: Creates a listview widget

QuickNavExamples

Methods

Events

Basic linked lists

A listview is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly listview with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an Ajax request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the data- attribute reference to see all the possible attributes you can add to listviews.

Here is the HTML markup for a basic linked list.

1
2
3
4
5
<ul data-role="listview">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

Theming

The listview widget uses the jQuery Mobile CSS framework to style its look and feel. If listview specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

  • ui-listview: Outermost container for listview widget
    • ui-listview-item-static: Simplest list item of listview when there are no anchor tags nested inside an item
    • ui-listview-item-divider: List item element which is a divider
    • ui-listview-item-has-alternate: List item element which has more than one anchor elements
      • ui-listview-item-button: First anchor element
      • ui-listview-item-split-button: Last anchor element
        • ui-listview-item-split-icon: Icon of last anchor element
    • ui-listview-item: List item element which has only one anchor elements. If the listview item has count bubble, it will additionally have ui-listview-item-has-count class.
      • ui-listview-item-button: Anchor element of the list item
      • ui-listview-item-icon: Icon for the list item
      • ui-listview-item-count-bubble: Count bubble for list item if present

Style note on non-inset lists: all standard, non-inset lists have a -1em (16px) margin to negate the 1em padding on the content area to make lists extend to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.

Numbered lists

Lists can also be created from ordered lists (ol) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the listview, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.

Read-only lists

Listviews can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework styles static list items identically to list items containing links, but static items receive the body background color (ui-body-a) rather than the button background color (ui-btn-a).

Split button lists

In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items - the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the title attribute of the link to the text of the link for accessibility.

You can set the icon for the right split icon by specifying a data-split-icon attribute on the listview with an icon name you want. The default icon is "carat-r" but can be configured with the splitIcon listview option. By adding a data-icon attribute to the list item, you can set individual icons for each split. The theme swatch color of the split button defaults to "b" (blue in the default theme) but can be set by specifying a swatch letter with the data-split-theme attribute at the listview level or for individual splits with the data-theme attribute at the link level.

List dividers

List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the data-divider-theme attribute to the list element (ul or ol) and specifying a theme swatch letter.

Autodividers

A listview can be configured to automatically generate dividers for its items. This is done by adding a data-autodividers="true" attribute to any listview.

By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the autodividersSelector option on the listview programmatically. For example, to add a custom selector to the element with id="mylistview":

1
2
3
4
5
6
7
8
9
10
11
$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a <li> element from the listview;
// it should return the appropriate divider text for that <li>
// element as a string
autodividersSelector: function ( li ) {
var out = /* generate a string based on the content of li */;
return out;
}
});

Note that if you are using formatted list items that contain a floating element (for example ui-li-aside), this element precedes its siblings regardless of the order in your HTML markup. This results in the first character of the floating element being used as divider text. Therefore it is recommended to specify the divider text in this case.

If new list items are added to the list or removed from it, the dividers are not automatically updated: you should call refresh() on the listview to redraw the autodividers.

Hiding dividers

The listview hidedividers extension provides the option hideDividers. When set to true, and you call .listview( "refresh" ) after hiding a list item by adding the class ui-screen-hidden to it, the extension will hide those dividers that are followed immediately by another divider.

Search filter

As of jQuery Mobile 1.4.0 this functionality has been transferred to the filterable widget, which provides a more generic solution.

Note: Features such as automatic text input generation and special handling of listview dividers are deprecated as of 1.4.0. The documentation for filterable describes the migration path for listviews.

Filter reveal

The filter reveal feature makes is easy to build a simple autocomplete with local data. When a filterable list has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank. The data-filter-placeholder attribute can be added to specify the placeholder text for the filter. If you need to search against a long list of values, we provide a way to create a filter with a remote data source.

Remote autocomplete with listview filter

To use the filter as an autocomplete that taps into remote data sources, you can use the filterablebeforefilter event to dynamically populate a listview as a user types a search query. This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.

If you have a small list of items, you can use the listview filter reveal option to make an autocomplete with local listview data.

Cities worldwide

After you enter at least three characters the autocomplete function will show all possible matches.

Text formatting & counts

The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.

  • To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count
  • To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.
  • Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside

Thumbnails & icons

To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element.

Inset lists

If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the data-inset="true" attribute to the list (ul or ol), applies the inset appearance.

Calling the listview plugin

You can directly call the listview plugin on any selector, just like any jQuery plugin:

1
$( "#mylist" ).listview();

Updating lists

If you add items to a listview, you'll need to call the refresh() method on it to update the styles. For example:

1
$( "#mylist" ).listview( "refresh" );

Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.

If you initially want to hide a list item you can do this by adding a class of ui-screen-hidden to the li element. Using this class ensures the corner styling is applied correctly as well as border-bottom on the last visible item.

Options

autodividers 

Type: Boolean
Default: false
This option is provided by the listview.autodividers extension.

When set to true, dividers are automatically created for the listview items.

The function stored in the value of the autodividersSelector option governs the text displayed on the dividers.

This option is also exposed as a data-attribute: data-autodividers="true".

autodividersSelector 

Type: Function()
Default: n/a
This option is provided by the listview.autodividers extension.

The value of this option is a function that returns a string. It receives a jQuery collection object containing an element. It computes the returned string from the element. The function is called for each list item in sequence, and a divider is created whenever the function returns a value for a list item that is different from the value it returned for the previous list item.

The function may return null for a given list item. In that case, no new divider is created even if the value returned for the previous list item was something other than null.

The default value of this option is a function that returns the capitalized first letter of the list item text:

1
2
3
4
5
6
7
8
9
10
11
12
13
function defaultAutodividersSelector( elt ) {
// look for the text in the given element
var text = $.trim( elt.text() ) || null;
if ( !text ) {
return null;
}
// create the text for the divider (first uppercased letter)
text = text.slice( 0, 1 ).toUpperCase();
return text;
}

classes 

Type: Object
Default:
{
"ui-listview-inset": "ui-corner-all ui-shadow"
}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the listview with the classes option specified, changing the theming for the ui-listview class:

1
2
3
4
5
$( ".selector" ).listview({
classes: {
"ui-listview": "highlight"
}
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-listview class:

1
2
3
4
5
// Getter
var themeClass = $( ".selector" ).listview( "option", "classes.ui-listview" );
// Setter
$( ".selector" ).listview( "option", "classes.ui-listview", "highlight" );

countTheme 

Type: String
Default: null, inherited from parent
This option is deprecated in 1.4.0 and will be removed in 1.5.0.

Sets the color scheme (swatch) for the list item count bubble. It accepts a single letter from a-z that maps to the swatches included in your theme.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-count-theme="b".

(version deprecated: 1.4.0)
Code examples:

Initialize the listview with the countTheme option specified:

1
2
3
$( ".selector" ).listview({
countTheme: "b"
});

Get or set the countTheme option, after initialization:

1
2
3
4
5
// Getter
var countTheme = $( ".selector" ).listview( "option", "countTheme" );
// Setter
$( ".selector" ).listview( "option", "countTheme", "b" );

defaults 

Type: Boolean
Default: false
Seting this option to true indicates that other widgets options have default values and causes jQuery Mobile's widget autoenhancement code to omit the step where it retrieves option values from data attributes. This can improve startup time.

This option is also exposed as a data attribute: data-defaults="true".

Code examples:

Initialize the listview with the defaults option specified:

1
2
3
$( ".selector" ).listview({
defaults: true
});

Get or set the defaults option, after initialization:

1
2
3
4
5
// Getter
var defaults = $( ".selector" ).listview( "option", "defaults" );
// Setter
$( ".selector" ).listview( "option", "defaults", true );

disabled 

Type: Boolean
Default: false
Disables the listview if set to true.

This option is also exposed as a data attribute: data-disabled="true".

Code examples:

Initialize the listview with the disabled option specified:

1
2
3
$( ".selector" ).listview({
disabled: true
});

Get or set the disabled option, after initialization:

1
2
3
4
5
// Getter
var disabled = $( ".selector" ).listview( "option", "disabled" );
// Setter
$( ".selector" ).listview( "option", "disabled", true );

dividerTheme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for list dividers. It accepts a single letter from a-z that maps to one of the swatches included in your theme.

This option is also exposed as a data attribute: data-divider-theme="b".

Code examples:

Initialize the listview with the dividerTheme option specified:

1
2
3
$( ".selector" ).listview({
dividerTheme: "b"
});

Get or set the dividerTheme option, after initialization:

1
2
3
4
5
// Getter
var dividerTheme = $( ".selector" ).listview( "option", "dividerTheme" );
// Setter
$( ".selector" ).listview( "option", "dividerTheme", "b" );

filter 

Type: Boolean
Default: false
This option is deprecated in 1.4.0 and will be removed in 1.5.0. It has become the initSelector for the filterable widget.

Adds a search filter bar to listviews.

This option is also exposed as a data attribute: data-filter="true".

(version deprecated: 1.4.0)
Code examples:

Initialize the listview with the filter option specified:

1
2
3
$( ".selector" ).listview({
filter: true
});

Get or set the filter option, after initialization:

1
2
3
4
5
// Getter
var filter = $( ".selector" ).listview( "option", "filter" );
// Setter
$( ".selector" ).listview( "option", "filter", true );

filterCallback 

Type: Function()
Default: n/a
This option is deprecated in 1.4.0 and will be removed in 1.5.0. It is now implemented in the filterable widget.

The function to determine which rows to hide when the search filter textbox changes. The function accepts two arguments -- the text of the list item (or data-filtertext value if present), and the search string. Return true to hide the item, false to leave it visible.

1
2
3
4
5
6
$( document ).on( "mobileinit", function() {
$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
// only show items that *begin* with the search string
return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
};
});
(version deprecated: 1.4.0)

filterPlaceholder 

Type: String
Default: "Filter items..."
This option is deprecated in 1.4.0 and will be removed in 1.5.0.

The placeholder text used in search filter bars.

This option is also exposed as a data attribute: data-filter-placeholder="Search...".

(version deprecated: 1.4.0)
Code examples:

Initialize the listview with the filterPlaceholder option specified:

1
2
3
$( ".selector" ).listview({
filterPlaceholder: "Search..."
});

Get or set the filterPlaceholder option, after initialization:

1
2
3
4
5
// Getter
var filterPlaceholder = $( ".selector" ).listview( "option", "filterPlaceholder" );
// Setter
$( ".selector" ).listview( "option", "filterPlaceholder", "Search..." );

filterReveal 

Type: String
Default: false
This option is deprecated in 1.4.0 and will be removed in 1.5.0. It is now implemented in the filterable widget.

When true, and the search input string is empty, all items are hidden instead of shown.

This option is also exposed as a data attribute: data-filter-reveal="true".

(version deprecated: 1.4.0)
Code examples:

Initialize the listview with the filterReveal option specified:

1
2
3
$( ".selector" ).listview({
filterReveal: true
});

Get or set the filterReveal option, after initialization:

1
2
3
4
5
// Getter
var filterReveal = $( ".selector" ).listview( "option", "filterReveal" );
// Setter
$( ".selector" ).listview( "option", "filterReveal", true );

filterTheme 

Type: String
Default: null, inherited from parent
This option is deprecated in 1.4.0 and will be removed in 1.5.0.

Sets the color scheme (swatch) for the search filter bar. It accepts a single letter from a-z that maps to one of the swatches included in your theme.

This option is also exposed as a data attribute: data-filter-theme="a".

(version deprecated: 1.4.0)
Code examples:

Initialize the listview with the filterTheme option specified:

1
2
3
$( ".selector" ).listview({
filterTheme: "b"
});

Get or set the filterTheme option, after initialization:

1
2
3
4
5
// Getter
var filterTheme = $( ".selector" ).listview( "option", "filterTheme" );
// Setter
$( ".selector" ).listview( "option", "filterTheme", "b" );

hideDividers 

Type:
Default: false
This option is provided by the listview.hidedividers extension.

When set to true and all list items residing under a given divider become hidden, then the divider itself is hidden.

This option is also exposed as a data-attribute: data-hide-dividers="true".

Code examples:

Initialize the listview with the hideDividers option specified:

1
2
3
$( ".selector" ).listview({
hideDividers: true
});

Get or set the hideDividers option, after initialization:

1
2
3
4
5
// Getter
var hideDividers = $( ".selector" ).listview( "option", "hideDividers" );
// Setter
$( ".selector" ).listview( "option", "hideDividers", true );

icon 

Type: String
Default: "carat-r"
Applies an icon from the icon set to all linked list buttons.

This option is also exposed as a data attribute: data-icon="star".

Code examples:

Initialize the listview with the icon option specified:

1
2
3
$( ".selector" ).listview({
icon: "star"
});

Get or set the icon option, after initialization:

1
2
3
4
5
// Getter
var icon = $( ".selector" ).listview( "option", "icon" );
// Setter
$( ".selector" ).listview( "option", "icon", "star" );

initSelector 

Type: Selector
Default: See below

The default initSelector for the listview widget is:

1
":jqmData(role='listview')"

Note: This option is deprecated in 1.4.0 and will be removed in 1.5.0.
As of jQuery Mobile 1.4.0, the initSelector is no longer a widget option. Instead, it is declared directly on the widget prototype. Thus, you may specify a custom value by handling the mobileinit event and overwriting the initSelector on the prototype:

1
2
3
$( document ).on( "mobileinit", function() {
$.mobile.listview.prototype.initSelector = "div.custom";
});

Note: Remember to attach the mobileinit handler after you have loaded jQuery, but before you load jQuery Mobile, because the event is triggered as part of jQuery Mobile's loading process.

The value of this option is a jQuery selector string. The framework selects elements based on the value of this option and instantiates listview widgets on each of the resulting list of elements.

(version deprecated: 1.4.0)

inset 

Type: Boolean
Default: false
Adds inset list styles.

This option is also exposed as a data attribute: data-inset="true".

Code examples:

Initialize the listview with the inset option specified:

1
2
3
$( ".selector" ).listview({
inset: true
});

Get or set the inset option, after initialization:

1
2
3
4
5
// Getter
var inset = $( ".selector" ).listview( "option", "inset" );
// Setter
$( ".selector" ).listview( "option", "inset", true );

splitIcon 

Type: String
Default: "carat-r"
Applies an icon from the icon set to all split list buttons.

This option is also exposed as a data attribute: data-split-icon="star".

Code examples:

Initialize the listview with the splitIcon option specified:

1
2
3
$( ".selector" ).listview({
splitIcon: "star"
});

Get or set the splitIcon option, after initialization:

1
2
3
4
5
// Getter
var splitIcon = $( ".selector" ).listview( "option", "splitIcon" );
// Setter
$( ".selector" ).listview( "option", "splitIcon", "star" );

splitTheme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for split list buttons. It accepts a single letter from a-z that maps to one of the swatches included in your theme.

This option is also exposed as a data attribute: data-split-theme="b".

Code examples:

Initialize the listview with the splitTheme option specified:

1
2
3
$( ".selector" ).listview({
splitTheme: "b"
});

Get or set the splitTheme option, after initialization:

1
2
3
4
5
// Getter
var splitTheme = $( ".selector" ).listview( "option", "splitTheme" );
// Setter
$( ".selector" ).listview( "option", "splitTheme", "b" );

theme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for the listview widget. It accepts a single letter from a-z that maps to the swatches included in your theme.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-theme="b".

Code examples:

Initialize the listview with the theme option specified:

1
2
3
$( ".selector" ).listview({
theme: "b"
});

Get or set the theme option, after initialization:

1
2
3
4
5
// Getter
var theme = $( ".selector" ).listview( "option", "theme" );
// Setter
$( ".selector" ).listview( "option", "theme", "b" );

Methods

refresh()Returns: jQuery (plugin only)

update the listview.

If you manipulate a listview via JavaScript (e.g. add new LI elements), you must call the refresh method on it to update the visual styling.

  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
$( ".selector" ).listview( "refresh" );

Events

create( event, ui )Type: listviewcreate

triggered when a listview is created

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the listview with the create callback specified:

1
2
3
$( ".selector" ).listview({
create: function( event, ui ) {}
});

Bind an event listener to the listviewcreate event:

1
$( ".selector" ).on( "listviewcreate", function( event, ui ) {} );

Example:

A basic example of a listview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>listview demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
</ul>
</div>
<div>
</body>
</html>

Demo: