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

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 .

Simple Map using Google Maps API v3

Let us begin with our first example using Google Maps API v3. Even before a marker - the most basic element of a map, appears, the map should be seen on the screen. Let us have a look at the following javascript code first. We will then have a look at the elements in the code. Ta-da a map in action! This map is centred at the Sansad Bhavan, New Delhi, India. In the above code the head of the document contains a critical script element. Its src attribute points to the location of the API on Google's server. In API v3 there is no need to obtain a key for the API. The remaining is simple Javascript. Happy mapping!!!

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

100th Post...

I’m so excited that I have finally reached this milestone. Well I am not completely certain that this is a big deal but anything that is ' 100 ' just seems big and grand. I have been blogging here for around 8 months now, and it gives me immense pleasure to say that now I have become an experienced blogger.:D I never thought when I started this blog in November, 2010 that I would have much to offer compared to the hundreds of other GIS bloggers out there. But today with more than 21,000 page views, more than 100 comments, more than 100 followers and several Like and +1s the response to this blog has been nothing short of amazing. Now the next target for me would be to cross 50,000 views. At the end, I would like to thank all visitors and members for making this blo...

Punjab cities to implement GIS...

The Punjab government is all set to implement ultra modern GIS systems in 6 big cities of Punjab namely Amritsar, Ludhiana, Jalandhar, Patiala, Batinda and Pathakot to facilitate future planning, expansion and maintenance of civic infrastructure in these cities. The GIS will be implemented in these cities by October 31, 2011, which would be further implemented in other districts of the state. Complete information of these cities will be available on the GIS which should prove beneficial and helpful during the preparation of "Master Plans" of these cities in the future. The satellite images of these cities will be taken which would later on be developed to form a large database. The maps that will be generated would provide detailed information on roads and rail networking along with exact locations of bus stops and railway stations. The maps will also s...

The UI Dev

Search This Blog