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 bitter divorce of PSD and HTML

Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira can be found at arquiteturadeinformacao (Now don't ask me pronounce this =)). Some are calling it the death of PSD but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted. Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies eve...

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

ES6 101 - Map

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

Jquery Mobile - Filtering the Listview

So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem. jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". Now again, this is not going to satisfy the client. The client will not like the default search and will ask for customization . No problem again. We can do it very easily again by virtue of the Jquery Mobile framework. To configure the placeholder text in the search input, use the data ...

My first blog!

" W hy is it that there are no Goolge Maps API examples which show India specific data?"...This question kept bothering me all through my learning phase. I always thought why aren't there any examples that use a map which shows Indian locations. Anybody who is new to Google Maps API application development would love to see a location that he knows of on the map! This is what I longed for all the way through and now have decided to put up simple examples and other supporting data for building customised simple Google Maps and all will show locations in India! When starting something new, if one finds something familiar out there, then it gives a feeling of comfort! And this is what I will try to provide to all those out there who are facing a similar problem that I faced! I am not an expert at Google Maps API, I am learning too...But, I will like to help out people along the way! So, all comments from the novice to the profession...

The UI Dev

Search This Blog