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

ES6 101 - For..of

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

ES6 101 - Lexical Declarations - Const

Drive along - Cool coding

This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun! Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...

Learning React in #41Tweets

Sounds crazy, right? 😲Not really. It is possible! This is no magic pill ✨ . There is no substitute for practice and experience , but this will get you started and help you make the right decisions in your React journey. When I started with React, the sheer use of ES6 syntax and difference in the coding style, made me not want to use it. But when I learned and practiced ES6 and then learned and practiced React, that is when I truly fell in love with React 😍 I created a Twitter Moment Learning React ⚛️ which is basically a collection of #41Tweets that will get you off the ground on your React journey. I hope you like this new approach to learning React and hope it is helpful in getting you started 🤝Let me know your feedback and keep the conversation going on Twitter 🐦

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

The UI Dev

Search This Blog