Thursday, April 18, 2013

Jquery Mobile - Listview with icon images

    We have seen a number of examples on Jquery Mobile's listview and in continuation to the series of these examples, we will take a look at how we can add an icon to a listview. This icon will be positioned to the extreme left of the listview as we have the regular right arrow icon on the right of the listview.

    Adding an icon to the left of the text in a list item is pretty simple. Just add an image tag inside of the list item as the first child and add class ui-li-icon to this image element. The image would scale to a 16x16 pixel icon and positioned to the left of the list item text.

    Let's take a look at the example below to understand how this is actually implemented.



    Hope you have followed the example above. Drop a line in case you need further explanation on this or have any doubts. I would be more than happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!