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 .

Google Map's Real-Time Traffic Layer...

You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support. Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE... The output of the above code looks as seen in the r...

Google Street View Image API

Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look. Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...

On-click polyline

Following up on the last example where we saw how to add a hard-coded polyline to our map, today we will see a more user interactive polyline example. In this example we will discuss on-click polyline! What you need to do is, copy the following code into a txt file and save it with dot html (.html) extension and then view it in your browser. So here goes the code! The output of the above code will be a map centred at Mysore. Click on the map for the first time and a marker will appear there. On the next click, another marker will appear with a polyline between the 2 markers. This will continue for all further clicks and here you have your "On-click polyline" running! The map looks something like seen in the image below! The next step to this code will be creating a polygon. We will see examples to create polygons on the map at a later stage! If you have any queries or suggestion, please drop a comment here or feel free to ...

Bihar dials mobile tech to track road-building

Upwardly mobile Bihar is now set to become the first state in India to use the latest cell phones for centralised monitoring of road construction. In an earlier post we saw how the Bihar police were using the GIS technology to track down the criminals. Bihar State Road Development Corporation (BSRDC), under the Road Construction Department (RCD), will deploy Android phones to help executive engineers keep an eye on road construction from district headquarters, while the RCD Secretary will do so from the Patna office. Earlier, Bihar State Bridge Construction Corporation had successfully used GPS-enabled phones to help mobile inspectors track engineers on duty. The latest mobile operation system supports all Google applications in 3G mobile phones. Using the latest Android technology, ...

The UI Dev

Search This Blog