Up to now, we have created very simple pages rendered by jQuery Mobile. The next big step is to use rich controls and views provided by the framework; in this case, lists. Almost every mobile project will have at least one list in its content, so that is why we are going to address this first.
It’s difficult to start this chapter with a definition. You already know what a
list is. And there is nothing new I can say about them as a general term.
Inside jQuery Mobile world, a list is just an ordered (
ol HTML element) or
ul HTML element) list
inside a page with at least one list item (
li HTML element) and
role defined as
listview using the HTML5 syntax
If you want to just show a bulleted or numbered list, you can always
ol HTML elements; just remember to not assign any
Lists are a powerful solution for many uses inside the framework, as we are going to see in next pages.
The most typical list is an unordered one (
ul) that simply exists inside a page without other
content. Let’s see a simple sample, illustrated in Figure 4-1:
jQuery Mobile renders lists optimized for touch usage, as you can see in the default row height used by the framework. Every list item automatically fits the whole width of the page, a typical UI pattern for touch mobile devices. (If we have a long list, we can use fixed toolbars.)
Remember that jQuery Mobile works on the client side. The document with the list can be generated dynamically with any server-side platform, such as PHP, Java, ASP.NET, or Ruby without any issue.
We can also use ordered lists with the
ol element. However, if we don’t define
interactive rows with links, there will not be any rendering difference from
ul, as we can see in Figure 4-2:
Figure 4-2. An ordered list is rendered the same as an unordered list, unless we define an interactive list
HTML5 does not use XML syntax; therefore it’s not necessary to close
all tags, like the element
course, you can close them if you feel more comfortable (for example, if
you are a developer like me; a nonclosing
li hurts my eyes).
By default, lists are in a full-page mode. That means that the list covers the whole
page contents, as in Figures 4-1 and 4-2. However, on some projects, it can be
useful to have lists mixed up with other HTML content. For that purpose,
jQuery Mobile offers inline lists. To define them, just add
data-inset="true" to the
<ol data-role="listview" data-inset="true"> <!-- item rows --> </ol>
In Figure 4-3 we can see how our previous samples are rendered using the inline attribute. As we can see, the table has a slightly different design, with more padding sharing space with other content inside the same page. It also adds nice rounded corners and other CSS3 effects.
With lists, we can define color swatches via
data-theme on the
ul element and also on every
With inline lists we can also design a page with multiple tables inside with optional HTML content between them.