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!

Comments

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 .

ES6 101 - Class

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 😍 😍

Tribute to Sachin Tendulkar

Sachin Ramesh Tendulkar - The greatest batsman of this generation is playing his 200th test match starting today. This test match that is being played between India and West Indies at the "master blaster"'s home ground at the Wankhede Cricket Stadium in Mumbai is the final match that he will be playing. The legend of cricket, the little master, the master blaster, the GOD of Cricket retires after this test match at Wankhede. A billion hearts are praying for the great Sachin Tendulkar and everybody is paying their tribute to this great ambassador of the game of Cricket. Sachin has borne the burden of the entire nation throughout his entire career and has been the hope for a million cricket fans in India. I still remember, when I was a kid, I used to turn off the television when Sachin would be dismissed, knowing for sure that the Indian cricket team would loose the match after his dismissal. It would not be wrong, if I were to say that every Indian ha...

Overlays - A complex example

In the last post we have seen what an overlay is and we have also seen a small simple overlay example as well. Today's example is a bit complex as compared to the last one, but is not at all difficult. We will directly jump to the code instead of having any more descriptions and stuff. So, here's the code. The output of the above code looks as seen in the result section above. You need to click on the map to place a marker on the map. You can place multiple markers on the map by clicking on the map multiple times. By clicking on the "Clear overlays" button all the markers on the map will disappear. By clicking on the "Show all overlays" button, all the cleared, but not deleted markers will reappear. Clicking on the "Delete overlays" buttons will remove all the markers permanently. If you have any doubts or queries regarding the code please leave a comment or drop me a mail .

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...

The UI Dev

Search This Blog