iOS-Inspired-jQuery-Mobile-Theme
iOS-Inspired-jQuery-Mobile-Theme copied to clipboard
Style list "with icons"
I am trying to include, icons in the list. It is undocumented in jQTouch. It works in jQTouch.
It works also here, but BIG List and small icon and not align properly.
It looks like this in your index.html
<ul data-role="listview" data-inset="true">
<li><a href="#headers">Header Bars</a></li>
<li><a href="#map"><img src="Images/Maps_iNS.png" class="ico" >Map</a></li>
<li><a href="#headerButtons">Header Buttons</a></li>
<li><a href="#footerTabs">Footer Tabs</a></li>
<li><a href="#formElements">Form Elements</a></li>
<li><a href="#listViews">List Views</a></li>
<li><a href="#dialogs">Dialogs</a></li>
<!--<li><a href="api-pages.html">API documentation</a></li>-->
</ul>
Probably, you can fix it using the jQTouch css or iUIKit css. I think they are the same.
Thanks in advance.
Edi: I guess we can use this syntax
<li><a href="#map"><img src="Images/Maps_iNS.png" alt="map" class="ui-li-icon">Map</a></li>
However, the alignment in not correct. It is aligned with the text. It must be center align, not top align.
Note: Making the icon smaller help the appearance of the list. It works but not as flash as the regular list icons in Apple iOS list.
It is desirable to have icons in list as showed in this app.
http://itunes.apple.com/app/picping/id409840907?ign-lr=Lockup_r2c1&mt=8
I have done this in jQTouch in one of my apps. https://picasaweb.google.com/116847891529748214201/GrowthAndYieldModellingForestry#5660264843140341218