Skip to main content

Jquery Mobile listview with custom icon

    This is the last post in the series of Jquery Mobile listviews before we move on to Jquery Mobile accordions (collapsibles) and then a series on form elements in Jquery Mobile. Today we will see how to add a custom made, third-party icon in listview instead of the standard icons provided by Jquery mobile.

    Wondering how to customize a list view, or adding a custom icon to a listview. Well there are 2 ways in which you can do this and we will see both.

    The easy way #1:
    Jquery Mobile provides the developers with creating a custom icon class something like a .ui-icon-custom and then adding data attribute data-icon="custom" to the list item. Let us take a look at the example that follows. This example would make things all the more clear.



    The difficult way #2 (My personal favourite):
    Now adding a custom icon to listview done in this way would help you explore how Jquery Mobile works or resolve some issues like "How to change the default "X" icon in the dialogs header" where you cannot use the easy way #1. Let's take a look at the example below and see how we can customize the listview.



    Hope you find this customization process important. I enjoy customizing the JQM defaults, challenges your mind! Hope you enjoy it too. Do let me know in case of any concerns regarding this post. Drop a comment in case you are facing any issues with customizing your Jquery mobile listviews; I would be happy to help!

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

jQuery Mobile's Next Big Step

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Celebrating 200K visitors!

    I’m so excited that I have finally reached this milestone. 200K blog hits! Yes, we have crossed 200K visits.     I never thought when I started this blog in November, 2010 that I would have much to offer that people would appreciate so much. But today with more than 200,000 page views, more than 500 followers and several Likes and +1s the response to this blog has been nothing short of amazing. Now I have the added responsibility of contributing better code samples and better articles.     At the end, I would  like to thank all visitors and members for making this blog successful. I am so happy to have readers such as you. Thank you all who have been reading. If you are a regular reader, or if you just dropped by today, do comment and tell me what you liked about the blog!
Post a Comment
Read more

Merry Christmas

    Hello everyone! Its been a long time since I last wrote. Got real busy with some exciting projects and exciting opportunities. It has been a crazy and really exciting and knowledgeable journey this year. Hope you all had a great year and are looking forward to the holiday season! I wanted to take this opportunity to wish you all a very happy Christmas!     As you all relish the goodies, decorate every nook and corner of your home and enjoy the get-togethers... May the joy and festivities continue to radiate in your lives, long after Christmas is gone! Stay safe, enjoy the holidays and get refreshed to join me on an enriching journey in the new year! I'll make sure that I write consistently and write about new things I learn.     Signing off for the holiday season!
Post a Comment
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more