Jquery Mobile - Listview with data-inset property

    In the previous post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property.

    Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false".

UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1

    Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.

Comments

Recommended for You

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

Web based GIS for polling booths in West Bengal...

The election commission of India will install web-based GIS in West Bengal's polling booths to help the State Chief Electoral Officer track them on their web site. The system will provide a map showing the exact spatial location of all 51919 polling booths and nearby landmarks, with their latitudinal and longitudinal coordinates. Boundaries of the parliamentary and assembly constituencies of the booths, along with all the administrative boundaries will also be provided in the GIS-based map. The software will give a 360-degree view of the entire area falling within the 200-meter radius of each polling booth, including approach roads and nearby installations. It will show every detail of the polling station, such as the number of voters, number of polling and security personnel deployed, details about the current law and order situation and reports of past violence or disturbance in the are...

Rail Radar - Map your Train Live!

Rail Radar - An interactive map that allows users to watch the movements of trains that are currently running in India. This means that you can now know the status of your trains live! Rail Radar is a real time tracker of the Indian Railways passenger trains. This live tracker is shown on our very own Google Maps and this long awaited system is a result of a collaboration between the CRIS - Center for Railway Information System and RailYatri.in. Since this is a live tracking system of the Indian Railways, a few questions that will pop up in the minds who have ever travelled by railways will be - "Is this system really reliable? Is the data accurate? Can I trust the Rail Radar ?" Well, the system is reliable and you can trust the data since the information and intelligence behind the Rail Radar is extracted and harnessed from volumes of data from the official Indian Railway's train running operational data. With regards to accuracy – this...

Jquery Mobile - Introduction to form elements

Jquery Mobile framework provides a complete set of finger-friendly form elements that are based on native HTML form elements. In the posts that will follow, we will take a look at the various form elements and the various properties that we can apply to these form elements. We will be taking a look at all the form elements like input types, textareas, slider control, toggle switch, radio buttons, checkboxes and select menus. We will also be covering how to use the mini versions of each of these input elements, how to disable them, how to initialize them and how to use the refresh method on the form elements. Hope you all enjoy the series on form elements like you loved the series on Jquery Mobile listview . Do drop a comment to let me know what you would want from this series and I would be happy to include those points. Share the word! Happy coding!

Four maps on the same page - Playing with events

In today's example we will see how to add 4 maps on the same web page and then play a bit around with some events in Google Maps API. Lets have a look at the code. All that you have to do to get the code working is copy the code in a text file and save it with .html extension. Open this html file in your browser and you will see the four maps in action! Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here! The output of the above code appears as seen in th...

The UI Dev

Search This Blog