Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from jQuery Mobile: Up and Running

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, ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page