Interactive Rows

Lists become more powerful when we combine them with touch interaction.

If a list element contains an a element, it will convert that row in an interactive one for touch and/or cursor navigation. One great feature of jQuery Mobile is that the whole row will be interactive automatically for touch no matter where the link is placed inside the row. Meaning the user doesn’t need to tap only in the link’s text area. She can tap on any pixel in the row.

Note

An interactive row has a different height than a read-only one. This different design is optimized for touch interaction, as the touch area needs to be large enough to avoid errors. The row text also has a larger font size. In iOS-based devices, 44 pixels is the recommended height for most common controls. Other touch devices use similar sizes.

The framework automatically adds a nice arrow at the right side of the row giving the user a hint that the row is touchable, as seen in Figure 4-5. This icon can be changed using data-icon, as we will see in a minute.

On the same list, we can mix interactive rows with read-only rows. However, the most typical UI design is to have full-interactive or full-read-only lists.

In the following sample, shown in Figure 4-5, we can see interactive rows in action:

<!DOCTYPE html>
<html>

<head>
  <!-- Typical jQuery Mobile header goes here -->
</head>

<body>

 <div data-role="page" id="main">

   <div data-role="header">
     <h1>Interactive</h1>
   </div>

   <div data-role="content">
      <ul data-role="listview">
          <li><a href="#page2">Internal Page link</a>
          <li><a href="other.html">External Page link</a>
          <li><a href="http://www.mobilexweb.com">Absolute external link</a>

          <li><a href="tel:+13051010200">Call to a phone number using a link</a>
          <li><a href="javascript:alert('Hi!')">JavaScript link</a>
      </ul>
   </div>

  </div>

 </body>
</html>

Figure 4-5. Interactive rows are just hyperlinks inside list elements that automatically are clickable and touchable

As we can see in Figure 4-5, when we are working with interactive rows, jQuery Mobile tries to maintain rows of the same height. Therefore, when the row’s title doesn’t fit in one line, like the fourth row’s title, jQuery Mobile will crop the text, adding an ellipsis at the end on CSS3-compatible devices. Keep the length of a row’s text to a minimum if you don’t have a detail page with the full text.

The a element must be inside the li tag, and there is no obligation to insert the row title as the content of the link. We can just leave the link empty and it will work anyway:

<li><a href="#page2"> Internal Page link </a>

On some devices with cursor or focus navigation, such as BlackBerry or Android, the user may choose to navigate with the keyboard keys or a trackball. Firing a row (using some OK key or pressing the trackball) will fire the link inside the list element. In Figure 4-6, you can see how this works on Android devices with a border focus shown typically in orange by the browser on the selected row.

Figure 4-6. On focus-based browsers, interactive lists can be browsed using cursor keys or a trackball

Using interactive lists is the preferred way to create links in a page, instead of using just a tags alone, because they are optimized for touch and cursor-based navigation.

When the user taps an interactive row that generates a page redirection action inside the framework, the row becomes selected while the new page is being transitioned or loaded from the network. A selected row has a different color scheme, as seen in Figure 4-7.

Figure 4-7. When a interactive row is selected, the framework changes its color scheme to a highlight background, light-blue on the default theme

We can change the default interactive row’s icon using data-icon on the li element, for example:

<li data-icon="info"><a href="#moreinfo">More information</a></li>

If we want to remove the icon on an interactive row, we can use the special false value on data-icon:

<li data-icon="false"><a href="#page2">No icon interactive row</a></li>

Nested Lists

Nested lists are a great feature of jQuery Mobile. If you have any hierarchical structure or navigation that you want to show in different pages, as in continents → countries → cities, you can use a nested list.

A nested list is just a list view (a list with the role specified) inside an item of another list view. For example, we can use a ul inside an li of another ul. jQuery Mobile will generate an implicit page for every nested list as if it were created by us explicitly and will make the link between levels automatically.

A nested list will be rendered with a different theme to provide visual reference that it is a second-level list. Of course, we can define theming explicitly with data-theme as we are going to see later.

Then, we have different levels of navigation automatically creating only one page. After loading, jQuery Mobile will show only items from the first level, and every item with a list inside it will become an interactive row. If the user selects that row, a transition to a new page will execute showing the next level list view with the back action to the previous level.

There is no limit in the quantity of levels a nested list can have. However, if you have too many levels and items, it’s a good idea to use different pages to reduce DOM and initial loading. Nested lists are only recommended for specific situations. Don’t create your whole site as a nested list.

Of course, we can mix nested lists with normal interactive rows. Therefore we can have a first level list with some items linked to other documents or pages, and other items with nested lists.

It’s important to add text to the li in addition to the ul or ol because the framework needs to show a title for the interactive item in the implicit page that is created.

Therefore, a typical nested list will look like:

<li>
    Item title
    <ul data-role="listview">
        <!-- Nested list items -->
    </ul>

Let’s create a sample, as shown in Figure 4-8:

<!DOCTYPE html>
<html>

<head>
  <!-- Typical jQuery Mobile header goes here -->
</head>

<body>

 <div data-role="page" id="main">

   <div data-role="header">
     <h1>Training</h1>
   </div>

   <div data-role="content">
      <ul data-role="listview">
          <li><a href="order.html">Order Now!</a>

          <li>Cities available
                <ul data-role="listview">
                      <li>Boston
                      <li>New York
                      <li>Miami
                      <li>San Francisco
                      <li>San Jose
                </ul>

          <li>Topics
                <ul data-role="listview">
                      <li>Intro to Mobile Web
                            <ul data-role="listview">
                                <li>WML and other oldies
                                <li>XHTML MP
                                <li>HTML 4.01
                                <li>HTML5
                            </ul>
                      <li>Mobile Browsers
                            <ul data-role="listview">
                                <li>Safari for iOS
                                <li>Android Browser
                                <li>Firefox for Mobile
                                <li>Opera
                            </ul>
                      <li>Tablet Browsers
                      <li>Using jQuery
                </ul>

          <li>Promotions
                <ul data-role="listview">
                      <li>10% off before May
                      <li><a href="promo3x2.html">3x2</a>
                      <li>10% off to subscribers
                </ul>

      </ul>
   </div>

  </div>

 </body>
</html>

Warning

In nested tables, jQuery Mobile will automatically use the row text as the title for the newly generated page, so be aware that you need to keep your text as simple and short as possible to fit in the title area.

Figure 4-8. Nested lists offer navigation similar to having different pages without creating new pages

In Figure 4-8 we can see all the navigation and pages that we get when using a nested list without special effort.

Note

With some jQuery Mobile hacks, we can create links to the automatically generated pages in a nested list manipulating the URL hash. However, if we need to do so, it might be better to have an explicit page created instead of a nested list.

Split Button Lists

Sometimes it’s useful if we can have two possible interactive actions active on the same row. The most common scenario is to have a detail action and also an edit action.

For example, if we list contact names on a table, we can offer two possible actions: view details and edit. For that purpose, jQuery Mobile uses what it is called a split row. If a list item, li, has two hyperlinks (a element), it will be automatically treated as an split row.

Figure 4-9. A split row allow us to have two active zones per row, one for the typical action and one defined by a separate icon at the right

As we can see in Figure 4-9, the row is split in two parts: left and right. The first link in the DOM will be used as the first action, active in the left side of the row. The second link will be used as the alternate action, activated on the right side of the row.

The second link action doesn’t need any text inside the link. In fact, the first link action doesn’t either. We can leave the a link without contents, and it will be applied to the whole row.

Note

Following iOS user interface guidelines, the first action should be used for details and the second action should be used for edit. However, that is not an obligation.

By default, jQuery Mobile will use a bordered arrow icon for the right button (the second action) a little different than the one for standard interactive rows.

If we want to define a different theme for the right split icon, we can do it using data-split-theme over the ul tag.

Let’s take a look at a sample, shown in Figure 4-10:

<!DOCTYPE html>
 <html>

 <head>
   <!-- Typical jQuery Mobile header goes here -->
 </head>

 <body>

  <div data-role="page" id="main">

    <div data-role="header">
      <h1>Your Friends</h1>
    </div>

    <div data-role="content">
       <ul data-role="listview">
           <li><a href="details/bill">Bill Gates</a>
               <a href="edit/bill"></a>

           <li><a href="details/steve">Steve Jobs</a>
               <a href="edit/steve"></a>

           <li><a href="details/mark">Mark Zuckerberg</a>
               <a href="edit/mark"></a>

           <li><a href="details/larry">Larry Page</a>
               <a href="edit/larry"></a>
       </ul>
    </div>

   </div>


  </body>
 </html>

Figure 4-10. Every zone has its own selected state, as we can see here

We can change the icon for the second action using the modifier data-split-icon—applied to the list itself (ul or ol element) and not to the list item (li element).

The list view uses the same icon set as for buttons (as we are going to see in the next chapters), but with the addition of a rounded border for a visual difference from normal buttons.

The possible icons we can use up to jQuery Mobile 1.0 are shown in Table 3-1.

Note

We can provide our own icon set using only one image and applying CSS Sprites, like the ones included in the framework.

Managing row importance

If we want some or all rows to be more important than typical ones, we can insert the row’s title inside any hx tag, such as h2 or h3. When we do that, that row will grow in height.

If we want a row to be less important (maybe for a not-so-frequent action), we should enclose the row’s title in a p tag to reduce the row’s height.

In later chapters we will see how to customize list views and rows in a more precise way.

Ordered Interactive Lists

Previously in this chapter, we talked about using ol for defining our list views instead of ul. We’ve also realized that using ol on read-only lists has no effect on the rendering. That is definitely different when we have interactive rows.

First, one important requirement: all the rows must be interactive for this list to work. Then, we can use ol and our links will be numbered automatically, as we can see in Figure 4-11.