Latest web development tutorials

jQuery Mobile content list

jQuery Mobile List icon

By default, each list item will contain an arrow icon "carat-r" (right arrow). If you want to change this icon can use the data-icon attribute:

Examples

<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"
Note data-icon = "false" will remove the icon.

A more complete jQuery Mobile button icons, please visit our jQuery Mobile icon Reference Manual .

16x16 icon

If you want to add to your list of criteria 16x16px icon, you can add the <img> element in the list items and use the "ui-li-icon" category:

Examples

<Ul data-role = "listview">
<li> <a href="#"> <img src = "us.png" alt = "USA" class = "ui-li-icon"> USA </a> </ li>
</ Ul>

try it"

jQuery Mobile list thumbnail

An image larger than 16x16px, add the <img> element in the link.

jQuery Mobile will automatically scales the image to 80x80px:

Examples

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

try it"

Use standard HTML to add a list of information:

Examples

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>

try it"

jQuery Mobile List icon

In the list of <img> element uses class = "ui-li-icon" Add 16x16px icon:

Examples

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>

try it"

Split button

JQuery Mobile in the list, it is sometimes necessary to make two different options for the content of the operation, then, the need for options link button segmentation. The method of segmentation is to achieve <li> element to add a <a> element, it can achieve the effect of dividing the page.

jQuery Mobile will automatically set the second link blue arrow icon, the icon is displayed when the link text (if any) in the user hovers over the icon:

Examples

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

try it"

Add some pages and dialog boxes to make the link more feature-rich:

Examples

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

try it"

Bubble Digital

Bubble numbers are used to display the number associated list item, such as a mailbox:

To add bubble numbers, using the inline elements like <span>, set the class "ui-li-count" attribute and add the numbers:

Examples

<ul data-role="listview">
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>

try it"

Note: The correct display of a digital bubble, you must modify the programming. This will be explained in later chapters.

Examples

More examples

Pop list
How to create a list of pop

Change the default link icon list items
How to set the default link icon list items (default right arrow).

Collapsible pop list
How to create a collapsible list of pop.

List foldable
How to create a show / hide list.

More formats
How to create a calendar.