A list view 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 list view 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. Here is the HTML markup for a basic linked list.
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
@@ -32,46 +32,56 @@ Basic linked lists
<li><a href="bmw.html">BMW</a></li>
</ul>
By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.
To set the swatch color of the child list views, data-theme attribute on each list inside.
Lists can also be created from ordered lists (ol) which is useful when presented items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, 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.
List views 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 defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.
- + Read-only list example - +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 sets the title attribute of the link to the text the link for accessibility.
You can set the icon for the right split icon by specifying a data-split-icon attribute with the icon name you want. The theme swatch color of the split button can be set by specifying a swatch letter in the data-split-theme attribute
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 body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the data-dividertheme attribute to the list element (ul or ol) and specifying a theme swatch letter.
jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either bind to the mobileinit event and set the $.mobile.listview.prototype.options.filterPlaceholder option to a string of your choosing, or use the data-attribute data-filter-placeholder on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute data-filter-theme on your listview.
If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining $.mobile.listview.prototype.options.filterCallback during mobileinit or after the widget has been created with $("#mylist").listview('option', 'filterCallback', yourFilterFunction). Any function defined for the callback will be provided two arguments. First, the text of the current list item and second the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the searchValue as a substring is described below:
+
+
+function( text, searchValue ){
+ return text.toLowerCase().indexOf( searchValue ) === -1;
+};
+
+
+
The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
- +ui-li-countTo 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 to size.
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.
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $('ul').listview('refresh');
We're currently working on a few improvements to the refresh method, so keep your eye on Github for updates.
- -We're currently working on a few improvements to the refresh method, so keep your eye on Github for updates.
+ + +