drawer.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <!--HTML5 doctype-->
  3. <html>
  4. <head>
  5. <title>App Framework Kitchen Sink</title>
  6. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11. <link rel="stylesheet" type="text/css" href="../build/icons.css" />
  12. <link rel="stylesheet" type="text/css" href="../build/af.ui.css" />
  13. <script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  14. <script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
  15. <script type="text/javascript" charset="utf-8" src="../build/appframework.ui.js"></script>
  16. <script>
  17. $(document).ready(function(){
  18. //$.afui.splitview.enable();
  19. })
  20. </script>
  21. </head>
  22. <body>
  23. <div id="splashscreen" class='ui-loader heavy'>
  24. App Framework
  25. <br>
  26. <br>
  27. <span class='ui-icon ui-icon-loading spin'></span>
  28. <h1>Starting app</h1>
  29. </div>
  30. <div class="view splitview" id="mainview">
  31. <header>
  32. <h1>What</h1>
  33. <a class="menuButton" data-left-menu="left" data-transition="cover"></a>
  34. </header>
  35. <div class="pages">
  36. <div class="panel" id="main" data-title="Main" data-selected="true">
  37. Splitview Demo
  38. </div>
  39. <div data-left-drawer="left" class="panel" id="foobar" data-title="Foobar">
  40. Foobar stuff goes here
  41. </div>
  42. </div>
  43. <footer>
  44. <a href="#main" class="icon home">Main</a>
  45. <a href="#foobar" class="icon trash">Foobar</a>
  46. </footer>
  47. <nav id="left">
  48. <div class="view active" id="navView1">
  49. <header>
  50. <h1>Left</h1>
  51. </header>
  52. <div class="pages">
  53. <div class="panel active" id="navPage1" data-title="Foobar">
  54. Splitview page 1
  55. <a href="#navPage2">Page 2</a>
  56. </div>
  57. <div class="panel" id="navPage2" data-title="Foobar">
  58. Splitview Page 2
  59. </div>
  60. </div>
  61. <footer>
  62. <a href="#navPage1" class="icon home">Page 1</a>
  63. <a href="#foobar" class="icon trash" data-menu-close>Main</a>
  64. </footer>
  65. </div>
  66. </nav>
  67. </div>
  68. </body>
  69. </html>