Creating Elementary Lists in jQuery Mobile

Mobile websites and mobile web applications have become an important part of nearly every ecommerce business. The most popular mobile user interface is likely a list. Fortunately, the jQuery Mobile Framework makes creating lists easy.

Lists, as a user interface, are not hard to describe. Simply, they list links, specifications, options, or navigation to make those elements easier for users to understand and use. A list’s versatility is the reason that list views are a very frequent component in mobile design.

A Basic List View

In the context of the jQuery Mobile Framework, the most basic list view is an unordered list with the data-role attribute of “listview.”

<ul data-role="listview" >
	<li><a href="suits.html">Suits</a></li>
	<li><a href="shirts.html">Shirts</a></li>
	<li><a href="ties.html">Ties</a></li>
	<li><a href="shoes.html">Shoes</a></li>
</ul>

The jQuery Mobile Framework will use a theme to render the unordered list as a finger-friendly interface. Don’t forget that for a list item to be tappable it should include an anchor element.

A basic list view example using jQuery Mobile Framework.

One point to remember is that jQuery Mobile will not wrap the list item’s content. Rather if the content width exceeds the available space, ellipses are used. As a rule, therefore, it is a good idea to limit the list item’s content.

Divided Lists

jQuery Mobile is also able to make divided lists or lists with sub-heads. These can be helpful for adding informational content. To create one of these dividers, which can be styled individually, add the data-role “divider” to a list item, which does not include a link.

<ul data-role="listview" >
	<li data-role="divider">Clothing</li>
	<li><a href="suits.html">Suits</a></li>
	<li><a href="shirts.html">Shirts</a></li>
	<li><a href="ties.html">Ties</a></li>
	<li data-role="divider" data-theme="g">Footwear</li>
	<li><a href="shoes.html">Shoes</a></li>
</ul>

jQuery Mobile also makes divided list views.

Creating Nested Lists

jQuery Mobile also supports using nested lists, which the platform treats like sub-pages. As an example, when a user clicks on an item in the parent list, the nested list is shown as a separate page. It is important to note that jQuery Mobile does not necessarily require each and every page to be a new HTML document. Rather a single HTML file many contain many mobile pages.

<ul data-role="listview" >
	<li><a href="womens.html">Women's</a></li>
	<li>Men's
		<ul data-role="listview" >
			<li data-role="divider">Clothing</li>
			<li><a href="suits.html">Suits</a></li>
			<li><a href="shirts.html">Shirts</a></li>
			<li><a href="ties.html">Ties</a></li>
			<li data-role="divider">Footwear</li>
			<li><a href="shoes.html">Shoes</a></li>
		</ul>
	</li>
</ul>

Nested lists show on a new mobile page.

Summing Up

The jQuery Mobile Framework supports enhanced list views. This article demonstrates three of the most basic forms of these lists, but there is almost infinitely more complexity available for the motivated mobile developer.