Creating lists

As you've (hopefully!) come to learn, jQuery Mobile takes an approach of enhancement when it comes to UI. You take ordinary, simple HTML and add a bit of markup (sometimes!), and jQuery Mobile will do the heavy lifting of enhancing the UI. The same process applies to lists. We've all worked with simple lists in HTML before; the following code snippet is an example:

<ul>
  <li>Raymond Camden</li>
  <li>Scott Stroz</li>
  <li>Todd Sharp</li>
  <li>Dave Ferguson</li>
</ul>

We all know how they are displayed (a bulleted list in the case of the previous code snippet). Let's take that list and drop it in a simple jQuery Mobile-optimized page. The code in Listing 4-1 takes a typical page and drops in our list:

Listing 4-1: test1.html
    <div data-role="page">
      <div data-role="header">
        <h1>My Header</h1>
      </div>
      <div role="main...