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.