Obsolated tags

Distingushing the obsolated tags and new tags.

1.obsolete {
2  color: #888;
3  opacity: 0.5;

Furthermore, we will add a bubble on the right side of the list item to indicate it is either new or obsolete tags.

Ul li count

We can make use of the .ui-li-count class to show bubble on the right side of list item.

In the following code snippet, which sits inside the toListItem method, we check if the tag needs an obsolete or html5 bubble.

1// Checking if need the `obsolete` bubble
2var obsolete = '';
3var obsoleteClass='';
4if (!this.html5)
6  obsolete = "<p class='ui-li-count'>obsolete</p>";
7  obsoleteClass = 'obsolete';
1// Checking if need the `html5` bubble
2var newTag = '';
3if (!this.html4 && this.html5) {
4  newTag = "<p class='ui-li-count'>html5</p>";

At last, we add the obsolete and html5 bubble and class to the HTML li tag and return it.

1return "<li class='" + obsoleteClass + "'><h1>" + tag + "</h1><p> " + tag.explain + "</p>" + obsolete + newTag +"</li>"

The result:

Listview 5

What’s next? We’re going to take a look at “Adding links”.

overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content