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

The Bicycling Layer...

Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object. The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles. Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...

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

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's latest April Fool's Prank

Google has done it again! Just in time for the April Fool's Day, Google introduced Google Maps Quest, a retro 8-bit version of its mapping tool... which is completely awesome! In the video available below, Google employees introduce the new version for the Nintendo Entertainment System (NES), replete with finicky cartridge and the vintage 8-bit music. With this new Google Maps Quest, one can do all the things that can already be done on the regular Google Map. You can search for famous landmarks and sites around the world like the Taj Mahal, Agra, India. You can also get detailed directions to avoid dangerous paths, and battle your way through a world of powerful monsters and mystic treasures. You can see the sequence of following images at lat-long 0,0 at incremental zoom levels starting from zoom level 9. To use this awesome 8-bi...

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...

The UI Dev

Search This Blog