jQuery Mobile – The User Interface

The jQuery Mobile frameworks enables the construction of touch-friendly user interfaces using the data- attributes.

The following is the HTML for UI content “listview”:

<ul data-role="listview">
   <li><a href="#"><h3>Item 1</h3><p>Description 1.</p></a></li>
   <li><a href="#">Item 2</a></li>
   <li data-role="list-divider">Divider 1</li>
   <li><a href="#">Item 3</a></li>
</ul>

The following is the HTML for UI content “collapsible”:

<div data-role="collapsible-set">
   <div data-role="collapsible" data-collapsed="false">
      <h3>Collapsible One</h3>
      <p>This is a collapsible data area.  Put your content here.</p>   
   </div> <!--collapsible -->
</div> <!-- collapsible set -->

The following is the HTML for UI content “flipswitch”:

<label for="myFlip">Flip Switch:</label>
<input type="checkbox" id="myFlip" data-role="flipswitch" />

The following is the HTML for UI content “controlgroup” of checkboxes:

 <fieldset data-role="controlgroup" data-mini="true">
    <legend>Items:</legend>
    <input type="checkbox" name="item1" id="item1" />
    <label for="item1">Item 1</label>
 </fieldset> <!-- controlgroup -->

For a complete list of form elements, check out the jQuery Mobile docs.