jQuery Mobile Pages

Experiment with jQuery mobile pages and the multiple pages template.

by sebastianauer

HTML

<link rel="stylesheet" href="Minified and Gzipped structure without a theme: jquery.mobile-1.1.1.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<div data-role="page" id="Collection">
    <div data-role="header">
        <h1>Collections</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" >
            <li id="collection1">
                      <a href="#">
                      <img src="http://placehold.it/80x80&text=Pic" />
                      <h2>Collection 1</h2>
                      <p>Donec sed odio dui. Donec sed.</p>
                  </a>                
            </li>
            <li id="collection2">
                  <a href="#stuff_collection">
                  <img src="http://placehold.it/80x80&text=Pic" />
                      <h2>Collection 2</h2>
                      <p>Sed posuere consectetur est at lobortis.</p>
                  </a>                
            </li>
        </ul>
    </div>
        <div data-role="footer">
            <small class="center">&copy; 2012 Company, Inc.</small>
    </div><!-- /footer -->    
</div>



<div data-role="page" id="stuff_collection" data-add-back-btn="true">
        <div data-role="header" >
            <h3 class="" style="text-align: center; white-space: normal;">Vintage stuff Collection</h3>
        </div>
        <div data-role="content">
            <ul data-role="listview">
              <li>
                <a href="#NLM13">
                    <img src="http://placehold.it/80x80&text=Pic" width="80" height="80">
                    <span>Item 1 of many</span><br />
                    <p>NLM13</p>
                </a>
              </li>
              <li>
                <a href="#NLM14">
                  <img src="http://placehold.it/80x80&text=Pic" width="80" height="80">
                  Item 2 of many
        ...