Skip to content
jQuery Mobile

Listviews

Filterable, grouped lists with thumbnails, icons, and count bubbles.

#listview#list#data

Code

jquery-mobile
<!-- Basic list with search filter and dividers -->
<ul data-role="listview" data-inset="true"
    data-filter="true" data-filter-placeholder="Search...">
  <li data-role="list-divider">Section A</li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li data-role="list-divider">Section B</li>
  <li><a href="#">Asparagus</a></li>
  <li><a href="#">Broccoli</a></li>
</ul>

<!-- List with thumbnail, description, and count bubble -->
<ul data-role="listview" data-inset="true">
  <li>
    <a href="#">
      <img src="thumb.jpg">
      <h3>Item Title</h3>
      <p>Short description text.</p>
      <span class="ui-li-count">12</span>
    </a>
  </li>
</ul>

<!-- Numbered list with split button -->
<ol data-role="listview" data-inset="true">
  <li>
    <a href="#details">Item Name</a>
    <a href="#buy" data-rel="popup">Buy</a>
  </li>
</ol>