jQuery Mobile List Content

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile List Content

« Previous
Next Chapter »

## jQuery Mobile List Thumbnails

For images larger than 16x16px, add an <img> element inside the link.

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 »

## jQuery Mobile List Icons

To add a 16x16px icon to your list, add class="ui-li-icon" to the <img> element:

## Example

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
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 style the second link as a blue 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-rel="dialog">Download Browser</a>
</li>
</ul>
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

Change the default link icon for list items
How to set different link icons for list items (right arrow is default).

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

More content formatting
How to make a calendar.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE