Question

To implement as above in an PhoneGap iPhone application I have used nested list in jQuery mobile as follows.

<ul data-role="listview" data-theme="e" data-header-theme="a">
                 <li data-role="list-divider" data-header-theme="a">ABC (123)</li>  <!----------- Section Header -------->
                 <li> <a href="#" data-panel="main"><h3 class="ui-li-heading">DM</h3><p class="ui-li-desc"> 1234 </p> </a></li>
                <li> <a href="#" data-panel="main"><h3 class="ui-li-heading">Def</h3><p class="ui-li-desc"> 11111 </p> </a></li>
</ul>

But now I need to add another label on the right hand side edge, and an image on the left hand side edge.

How can I display the right side label?

How can I display an image on left side edge?

Answer 1

For Display the Image:

<li>
 <a href="#">
<img src="../images/icons/icon-american.png"
alt="American flag icon"
class="ui-li-icon">
American
</a>
<ul>
<li>Dixon's</li>
<li>Vesta Dipping Grill</li>
<li>Steuben's</li>
</ul>
</li>