Adding Dividers to Lists

<ul data-role="listview" >   <li data-role="list-divider">Numbers</li>     <li>1</li><li>2</li><li>3</li>   <li data-role="list-divider">Letters</li>     <li>A</li><li>B</li><li>C</li> </ul> . . . <ul data-role="listview" data-autodividers="true">   <li>Alex</li><li>Alice</li><li>Brad</li><li>DaNae </li><li>David</li>   <li>Isaac</li><li>Jordan</li><li>Nancy</li> </ul>

A divided list is one in which elements of the list are divided from each other by a simple bar. The idea is to make it easier for the user to see the list items by splitting up the view.

You can create divided lists manually by injecting your own dividers and adding a data-role="list-divider" to one of the <li> elements. ...

Get jQuery and JavaScript Phrasebook 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.