Jquery Mobile - Text formatted listview

"The regular listview looks plain. I want to add a few other details in my list item." Have you also faced this requirement from your client? Well, for those who have and also for those who haven't yet, you can keep in mind that you can create a text formatted listview using JQM and design accordingly for your next project.

Let's take a look at the following example to understand how text-formatting can be achieved seamlessly.

As you can see in the HTML code above, to add text hierarchy, you need to use headings to increase font emphasis and use paragraphs to reduce the font emphasis. Supplemental information like "Last update: April 9, 2013" can be added to the right of each list item by wrapping content in an element like 'div' or 'p' with a of class ui-li-aside.

Now let's take a look at the CSS part. You will notice that I have included some CSS on id "no-ellipsis". If you have noticed, in the first list item, the description has been truncated and ellipsis (...) have been added at the end of line. This is the default behavior of JQM framework. However, you can over-ride this and display the complete description as you can observe in the second list item.

Hope you have followed the code sample. In case you have any doubts regarding this code sample, feel free to drop a comment and I would be happy to help. If you have liked the post, remember to comment and let me know and also share the post so that others learn from it too.

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