# jQuery Mobile List Content

« Previous
Next Chapter »

## jQuery Mobile List Icons

The default icon for each list item containing a link is "carat-r" (right arrow). To change this to another icon, use the data-icon attribute on the list item you want to modify:

## Example

<ul data-role="listview">
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Try it yourself »

| data-icon="false" will remove the icon.

For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.

## 16x16 Icons

To add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":

## Example

<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
Try it yourself »

## jQuery Mobile List Thumbnails

For images larger than 16x16px, add an <img> element inside a list item as the first child element (with no class name).

jQuery Mobile will automatically scale the image to 80x80px:

## Example

<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Try it yourself »

Use standard HTML to fill the list with information:

## Example

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Try it yourself »

## Split Buttons

To create a split list with a vertical divider bar, place two links inside the <li> element.

jQuery Mobile will automatically place the second link on the right side of the list with a right arrow-icon. And the text inside the link (if any) will be shown when a user hover over the icon:

## Example

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Try it yourself »

Lets add some pages and dialogs to make the links more functional:

## Example

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Try it yourself »

## Count Bubbles

Count bubbles are used to display numbers associated with list items, such as messages in a mailbox:

To add count bubbles, use an inline element, such as <span>, with class "ui-li-count" and add a number:

## Example

<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
Try it yourself »

Note: To show the correct number in a count bubble, it must be updated programmatically. This will be explained in a later chapter.

## More Examples

Popup lists
How to create a popup list.

Collapsible lists
How to create lists that hide and show content.

Collapsible popup lists
How to create a collapsible popup list.

Full width collapsible lists
Using the data-inset="false" attribute on "collapsibles/collapsible set" to enable a full width listview.

More content formatting
How to make a calendar.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples