Part 9—Create dedicated mobile website

46 List View

List view is the most important widget in jQuery mobile. Make sure to use it often and learn all its properties.

Usage:

<ul data-role='listview'>
  <li>a</li>
  <li>abbr</li>
  <!-- ... the rest of list items ... -->
  <li>video</li>
</ul>

Example:

<div data-role='page' id='root'>
  <div data-role='header'>
    <h1>Home</h1>
  </div>
  <div data-role='content'>
    <ul data-role='listview'>
      <li><a href='#about'>About</a></li>
      <li><a href='#page-2'>Page 2</a></li>
      <li><a href='#sign-up'>Sign up</a></li>
    </ul>
  </div>
</div>

Example of the about page.

<div data-role='page' id='about'>
  <div data-role='header'>
    <h1>About</h1>
    <a href='#root'>Home</a>
  </div>
  <div data-role='content'>
    <p>This is an example to link pages via listview.</p>
  </div>
</div>

License

List View Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.