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