<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Lists</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Lists</h1>
      </div>
      <div data-role="content" style='text-align:center'>
        <ul data-role="listview" data-filter="true"
            data-filter-placeholder="Search big cats..." data-inset="true">
          <li>Cheetah</li>
          <li>Cougar</li>
          <li>Jaguar</li>
          <li>Leopard</li>
          <li>Lion</li>
          <li>Snow Leopard</li>
          <li>Tiger</li>
        </ul>
        <ul data-role="listview" data-filter="true" data-filter-reveal="true"
            data-filter-placeholder="Search big cats..." data-inset="true">
          <li>Cheetah</li>
          <li>Cougar</li>
          <li>Jaguar</li>
          <li>Leopard</li>
          <li>Lion</li>
          <li>Snow Leopard</li>
          <li>Tiger</li>
        </ul>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqmlists">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Lists</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Lists</h1>
      </div>
      <div data-role="content" style='text-align:center'>
        <ul data-role="listview" data-inset="true">
          <li data-role="list-divider">Big Cats</li>
          <li>Cheetah</li>
          <li>Cougar</li>
          <li>Jaguar</li>
          <li>Lion</li>
          <li>Snow Leopard</li>
          <li data-role="list-divider">Big Dogs</li>
          <li>Bloodhound</li>
          <li>Doberman Pinscher</li>
          <li>Great Dane</li>
          <li>Mastiff</li>
          <li>Rottweiler</li>
        </ul>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqmlists">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Lists</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Lists</h1>
      </div>
      <div data-role="content" style='text-align:center'>
<ul data-role="listview" data-inset="true" data-autodividers="true">
   <li>Cheetah</li>
   <li>Cougar</li>
   <li>Jaguar</li>
   <li>Leopard</li>
   <li>Lion</li>
   <li>Snow Leopard</li>
   <li>Tiger</li>
</ul>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqmlists">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>Single page</h1>
      </div>
      <div data-role="content">    
        <p>This is a single page boilerplate template</p>
      </div>
      <div data-role="footer">
        <h4>Footer content</h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page Transitions</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Mobile Page Transitions</h1>
      </div>
      <div data-role="content"><table>
        <tr><th><h3>fade</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="fade" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="fade"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>pop</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="pop" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="pop"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>flip</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="flip" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="flip"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>turn</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="turn" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="turn"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>flow</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="flow" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="flow"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>slidefade</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="slidefade" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="slidefade"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>slide</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="slide" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="slide"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>slideup</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="slideup" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="slideup"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>slidedown</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="slidedown" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="slidedown"
           data-role='button'>page</a></td>
        </tr><tr><th><h3>none</h3></th>
          <td><a href="page-template.html" data-rel="dialog"
           data-transition="none" data-role='button'>dialog</a></td>
          <td><a href="page-template.html" data-transition="none"
           data-role='button'>page</a></td></tr></table>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqm-trans">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Buttons</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Mobile Buttons</h1>
      </div>
      <div data-role="content" style='text-align:center'>
        <a data-role="button">Default</a>
        <a data-role="button" data-inline="true">In-line</a>
        <a data-role="button" data-inline="true"
                              data-corners="false">Squared corners</a>
        <a data-role="button" data-inline="true"
                              data-shadow="false">Unshadowed</a>
        <a data-role="button" data-inline="true" data-corners="false"
                              data-shadow="false">Both</a><br>
        <a data-role="button" data-inline="true"
                              data-icon="home">Left icon</a>
        <a data-role="button" data-inline="true" data-icon="home"
                              data-iconpos="right">Right icon</a>
        <a data-role="button" data-inline="true" data-icon="home"
                              data-iconpos="top">Top icon</a>
        <a data-role="button" data-inline="true" data-icon="home"
                              data-iconpos="bottom">Bottom icon</a><br>
        <a data-role="button" data-mini="true">Default Mini</a>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqmbuttons">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Lists</title> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
  </head> 
  <body> 
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Lists</h1>
      </div>
      <div data-role="content" style='text-align:center'>
        <ul data-role="listview">
          <li>An</li>
          <li>Unordered</li>
          <li>List</li>
        </ul><br><br>
        <ol data-role="listview">
          <li>An</li>
          <li>Ordered</li>
          <li>List</li>
        </ol><br>
        <ul data-role="listview" data-inset="true">
          <li>An</li>
          <li>Inset Unordered</li>
          <li>List</li>
        </ul>
        <ul data-role="listview" data-inset="true">
          <li><a href='#'>An</a></li>
          <li><a href='#'>Inset Unordered</a></li>
          <li><a href='#'>Linked List</a></li>
        </ul>
      </div>
      <div data-role="footer">
        <h4><a href="http://tinyurl.com/jqmlists">Official Demo</a></h4>
      </div>
    </div>
  </body>
</html>