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