Jquery Mobile - Numbered Listview

Jquery Mobile Listview is probably the most popular component used in a lot of mobile web applications. The listview that is generally used is a ul-li structure. But Jquery Mobile allows the usage of the ol-li structure as well. The ol-li HTML structure will give the user a numbered listview. We will take a look at the following example to understand, how the numbered listview works.

As you can see in the result above, every list gets a number before the the list title. The numbered listview is useful when presenting items that are in a sequence like search results or a movie queue.

Hope you have followed this short tutorial and hope it helps you in your web application. In case, you have any doubt, comment or you come across any error, fell free to leave a comment and I will be happy to take a look at it. You can see a full list of Jquery Mobile examples here.

Comments

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 .

Two maps on the same page - Side-by-side

How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code. Let's see the code. Here it is! The output of the above code will be as seen in the result section above. As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...

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

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

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