Listviews

Code

<!-- 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>

Explanation

data-role=listview transforms ul/ol into a styled mobile list; data-inset adds rounded corners and margins, while data-filter=true injects a client-side search field. List dividers group items, thumbnails and count bubbles enrich rows, and split buttons provide two actions per item (link + action).

More jQuery Mobile Snippets