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>

Next Page → Customizing jQuery mobile

← Previous Page jQuery mobile button


Last updated at 2017-05-10. Show version history

Comments

no comments yet.

Please login to chat.