08 - jQuery Mobile - Lists

Introduction

You can create mobile optimized lists in jQuery Mobile using standard HTML lists and then assigning the value listview to data-role attribute of the <ol> or <ul> element. You can also style your lists, group the list items with dividers, add icons, thumbnails and count bubbles to the items and even make the list filterable. You just have to add links inside list items to make them clickable.

Creating Lists

You need to assign the value listview to the data-role attribute of the <ul> or <ol> element to make a list mobile optimized with jQuery Mobile. You need to add links inside list items to make them clickable.

Try this yourself:

<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="lists">
  <div data-role="content">
    <h3>Names</h3>
    <ul data-role="listview">
      <li>Aaron</li>
      <li>Abel</li>
      <li>Sophia</li>
      <li>Noah</li>
      <li>Ethan</li>
      <li>James</li>
      <li><a href="#">William</a></li>
      <li><a href="#">Lucy</a></li>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">Christopher</a></li>
      <li><a href="#">Keira</a></li>
      <li><a href="#">Daniel</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Save the file as lists.html and open it using your web browser. You will get a screen like this:

         

You could not see the right arrow for the first six names and they are not clickable as well. This is because that we have not added links for the first six items. When you add links inside a list item, the item automatically becomes a button without assigning the value button to the data-role.

Styling Lists

You can add rounded corners to your list with some margin by adding an attribute data-inset and setting its value to true. Thus, you can style your list to make it more professional.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="lists">
      <div data-role="content">
        <h3>Names List without Styling</h3>
        <ul data-role="listview">
          <li>Aaron</li>
          <li>Abel</li>
          <li><a href="#">Keira</a></li>
          <li><a href="#">Daniel</a></li>
        </ul>
        <h3>Names List with Styling</h3>
        <ul data-role="listview" data-inset="true">
          <li>Aaron</li>
          <li>Abel</li>
          <li><a href="#">Keira</a></li>
          <li><a href="#">Daniel</a></li>
        </ul>
     </div>
   </div>
  </body>
</html>

Save the file as styling-lists.html and open it using your web browser. You will get a screen like this:

         

Dividing Lists

You might have to divide the list items into different groups or sections to better organize your list. You can use list dividers to achieve this. You need to assign the value list-divider to the data-role attribute of the required <li> element

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
   <title>Sample Code</title>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
   <div data-role="page" id="lists">
    <div data-role="content">
     <h3>Names</h3>
     <ul data-role="listview" data-inset="true">
       <li data-role="list-divider">Grade 1</li>
       <li><a href="#">Aaron</a></li>
       <li><a href="#">Abel</a></li>
       <li><a href="#">Sophia</a></li>
       <li data-role="list-divider">Grade 2</li>
       <li><a href="#">Ethan</a></li>
       <li><a href="#">James</a></li>
       <li><a href="#">William</a></li>
       <li><a href="#">Ruby</a></li>
       <li data-role="list-divider">Grade 3</li>
       <li><a href="#">Christopher</a></li>
       <li><a href="#">Keira</a></li>
       <li><a href="#">Daniel</a></li>
     </ul>
    </div>
   </div>
  </body>
</html>

Save the file as divider.html and open it using your browser. You will get a screen like this:

         

 

If your list is an alphabetically sorted one, then you do not have to add the data-role attribute to each required <li> element and assign the value list-divider to it. You just need to add the data-autodividers attribute to the <ul> or <li> element and set its value to true.

Try this yourself:

<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="lists">
  <div data-role="content">
    <ul data-role="listview" data-autodividers="true" data-inset="true">
      <li><a href="#">Aaron</a></li>
      <li><a href="#">Abel</a></li>
      <li><a href="#">Christopher</a></li>
      <li><a href="#">Cathy</a></li>
      <li><a href="#">James</a></li>
      <li><a href="#">John</a></li>
      <li><a href="#">Joseph</a></li>
      <li><a href="#">Noah</a></li>
      <li><a href="#">Sarah</a></li>
      <li><a href="#">Sophia</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Save the file as sorted-list.html and open it using your browser. You will get a screen like this:

         

You can split the list vertically by placing two links inside the <li> element.

Try this yourself:

<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="lists">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a href="#">Aaron</a><a href="#">Click</a></li>
      <li><a href="#">Abel</a><a href="#">Click</a></li>
      <li><a href="#">Sophia</a><a href="#">Click</a></li>
      <li><a href="#">Noah</a><a href="#">Click</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Save the file as verticalsplit.html and open it using your web browser. You will get a screen like this:

         

Like us on Facebook