jQuery Mobile Cookbook

Chapter 6. List Views

In this chapter we will cover:

• Using inset and non-inset lists
• Creating a custom numbered list
• Using a nested list
• Using a read-only nested list
• Formatting content in a list
• Using a split button list
• Using image icons
• Creating a custom search filter
• Modifying a list with JavaScript

Introduction

A simple list in jQuery Mobile is created using the following code:

<ul data-role='listview'>
  <li><a href='link1'>Item 1</a></li>
  <li><a href='link2'>Item 2</a></li>
</ul>

The previous code is a regular HTML unordered list to which you add the attribute data-role='listview'. The framework now enhances the list, styles it, and makes it mobile friendly. It adds a right arrow for the anchor elements and when you tap any of the list items, the page ...