O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required