iOS-Inspired-jQuery-Mobile-Theme icon indicating copy to clipboard operation
iOS-Inspired-jQuery-Mobile-Theme copied to clipboard

Style list "with icons"

Open ns-1m opened this issue 12 years ago • 1 comments

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.

ns-1m avatar Nov 05 '11 04:11 ns-1m

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

ns-1m avatar Nov 07 '11 02:11 ns-1m