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

Fusion Table - Heat Map Layer

    In continuation with the previous example on Fusion Table, we will have a look at another Fusion Table layer example. Today's point of discussion is heat map! What is a heat map? A heat map is geographical representation of data where the values taken by a variable in two-dimensional map are represented as colors. Higher the value of the variable, that place on the map would be represented with a deeper color.     This example is very much similar to the previous one, just for one minor change! Let us have a look at the code.     I have just used a readily available Google Fusion Table for this example. Any anomalies in the data is not my responsibility! Copy the above code in an html file and open it in your browser! You will see the fusion table heat map layer in action! The only change in this code from the previous one is that, the heatmap property of the fusion table layer is made true! The output of the above code looks as s...
Post a Comment
Read more

Mumbai's public trasportation information now on Google Maps...

         Can anybody imagine life in Mumbai without the red BEST bus or the crowded local trains? It is difficult to imagine "aamchi Mumbai" without these buses and locals.          Knowing that life in Mumbai revolves around these trains and buses, Google India has made information on Brihanmumbai Electric Supply and Transport (BEST) Bus routes and Mumbai local train routes and schedule available on Google Maps. This information will now be available both on desktop and on mobile for millions of commuters in Mumbai, arguably the most used public transportation network in India.          The easy access of this service will help commuters and tourists find their way seamlessly around the city using both trains and buses.
Post a Comment
Read more

Orissa Cheif Minister launches "Odisha Sampad"

          The Orissa Chief Minister Naveen Patnaik dedicated ‘Odisha Sampad’ a Web-based Block GIS Atlas developed by the Orissa Space Application Centre (ORSAC) to the people of the state on 4 January.           The objective of ‘Odisha Sampad’ is to provide datasets of all the 314 blocks (village-wise) of the state relating to natural resources, environment, infrastructure, socio-economic and demography. The information content has been built on the basis of satellite image interpretation, survey at the block level and maps of other departments and agencies. The web atlas contains information on natural resources like land, utilization distribution of wastelands, forest lands, agriculture area, plantation, settlement, waterbodies etc.           It also contains information on soil, slope, lithology, drainage, geomorphology, ground water potenti...
Post a Comment
Read more

Jquery Mobile Buttons

    Buttons - an integral part of a form is styled really well and consistently using the Jquery Mobile framework. We will discuss and take a look at the different buttons, their styling and usage in today's post. Buttons are coded with standard HTML anchor and input elements, then enhanced by Jquery Mobile to make them more attractive and touch friendly for mobile usage. Let's discuss this and more in the example that follows.     You must have already observed that the styling for the first 5 buttons is the same, even though the HTML markup for each is different. The first one is created using an anchor tag. The next one using a button  element and further using input elements of type button , submit and reset . To create a button out of the anchor element, you need to include a data attribute data-role="button" with the anchor element. The framework now styles the anchor element as a button. Now the question arises as to when to use a anchor based ...
Post a Comment
Read more