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

Geodesic Polyline

Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere. The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change. Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve a...

Default keyboards for HTML5 input types

Following is the list of default keyboards that are displayed for the various HTML5 input types. These screenshots have been taken on the Android and iOs devices. Input type="color" Input type="date" Input type="datetime" Input type="datetime-local" Input type="email" Input type="month" Input type="number" Input type="number+pattern" Input type="password" Input type="tel" Input type="time" Input type="url" Input type="week"

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 .

Google Street View Image API

Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look. Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...

The UI Dev

Search This Blog