Skip to main content

Jquery Mobile - Theming listview icons

    After exploring all the standard listview types in the series of examples on listview, you must have observed that for a linked list, Jquery Mobile displays a standard "arrow-r" icon to the extreme right of the list. However, you don't want the standard "arrow-r" icon and you need some custom icon there.

    Jquery Mobile provides a set of icons that can be used along with listviews in place of the standard "arrow-r" icon. To override the standard icon, set the data-icon attribute on the desired list item to the name of a standard icon. We will see a complete list of icons in the following example.

    However, before proceeding to the example, let us also consider a case where we do not wish to have any icon on the list item. This too can be achieved by setting the value of data-icon attribute to false. We will also include this in our example that follows.



    Hope you have followed this post. Do drop a line in case you find any errors with this post or need more information on this. We will take a look at how we can customize the listview by adding a third party custom icon to it in the next post. Stay tuned for a complete customization of the listview!

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Fusion Table Layer...

    Today we will have a look at the "Fusion Table" Layer example. But before we start with the actual code, we will have a look at what Fusion Table is. Google Fusion Table is a free service for sharing and visualizing data online. It allows you to share data, merge data from multiple tables into interesting derived tables, and see the most up-to-date data from all sources. There is a lot of documentation about Google Fusion Table available on the web. You can visit their home page or the Google Research Blog to gather more information about Fusion Tables.     Let us have a look at the following code. The code is very short and simple to understand!     The few things to look out for in the above code are: The manner in which mapTypeId has been specified! In other Google Maps API v3 examples, we have seen that we specify mapTypeID as ROADMAP, SATELLITE, etc. i.e., all the letters are in uppercase and not in quotes! However, in this...
2 comments
Read more

ES6 101 - Class

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 😍 😍
Post a Comment
Read more

Hilarious Google Maps

       I came across these simple yet wonderfully done illustrations based on the Google Maps Street style by Christoph Niemann - Illustrator for the Times Magazine. These illustrations are absolutely stunning show of creativity, design, execution and general beauty. All the illustrations show exactly how it is on the roads in New York. Sit back and enjoy the show.
1 comment
Read more

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...
4 comments
Read more

Satellite to keep eye on Chambal, Palpur Kuno sanctuaries

         In a bid to check the rising incidents of poaching and keep an eye on the flora and fauna of the two sanctuaries in Madhya Pradesh, the government has decided to use satellite to monitor the Chambal and Palpur Kuno region.          The basic field technique, which is used currently, to maintain a log of the region’s vegetation, wildlife does not give the real time data. Therefore, the government has decided to use the Geographical Information System (GIS) Global Positioning System (GPS) for the purpose.          Madhya Pradesh’s leading animal scientist Dr. RJ Rao, who has received training in such satellite monitoring of national reserves from California, said the program ‘ARC Q-9’ is proving to be of great use in protection of the wildlife. They have used the program to prepare a database of the whole Chambal and Kuno region, said Rao. Sourc...
Post a Comment
Read more