<!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>