Visual Separators

You can use separators to divide a single list into row groupings with their own titles, as shown in Figure 4-4. It’s a common pattern on mobile operating systems, such as iOS on iPhone and iPad. To do this in jQuery Mobile, we can just use a new role available for li elements: data-role="list-divider".

Warning

Note that list dividers are just standard li elements with a different role, and they are at the same level as the normal row on the DOM tree.

We can divide the list elements into groups using this technique, such as A-Z groups if we are listing alphabetical ordered data or any other classification we want to make. Remember we can change the color swatch to highlight each divider.

Let’s run a simple example:

<!DOCTYPE html>
<html>

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

<body>

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

   <div data-role="header">
     <h1>World Cup</h1>
   </div>

   <div data-role="content">
      <ul data-role="listview">
          <li data-role="list-divider">Group A
          <li>Argentina
          <li>Nigeria
          <li>England
          <li>Japan
          <li data-role="list-divider">Group B
          <li>United States
          <li>Mexico
          <li>Korea
          <li>Greece
          <li data-role="list-divider">Group C
          <li>Germany
          <li>Finland
          <li>Chile
          <li>South Africa
      </ul>
   </div>

  </div>

 </body>
</html>
Here we can see how the row separators render on the list

Figure 4-4. Here we can see how the row separators render on the list

Warning

If we are populating the list from client-side code, as in JavaScript, we must call a refresh method after doing so, so the framework can take changes and render them properly. We will cover these techniques later, but for now, if you have only one list on a page with id page1, the jQuery code will look like $("#page1 ul").listview("refresh").

In Figure 4-4, we can see how list dividers work over lists.

Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial