tablet2.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Tablet2</title>
  6. <meta name="description" content="">
  7. <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
  8. <meta name="HandheldFriendly" content="True">
  9. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <meta name="mobile-web-app-capable" content="yes">
  13. <meta name="format-detection" content="telephone=no">
  14. <meta http-equiv="cleartype" content="on">
  15. <!-- Main Stylesheet -->
  16. <link rel="stylesheet" href="../../package/lungo/lungo.css">
  17. <link rel="stylesheet" href="../../package/lungo/lungo.theme.css">
  18. <link rel="stylesheet" href="../../package/lungo.icon/lungo.icon.css">
  19. </head>
  20. <body>
  21. <aside id="menu">
  22. <header data-title="Formula1"></header>
  23. <article class="active list scroll">
  24. <ul>
  25. <li data-view-section="ranking">Rankig</li>
  26. <li data-view-section="events">Events</li>
  27. </ul>
  28. </article>
  29. </aside>
  30. <section id="ranking" data-transition="slide" data-aside="menu">
  31. <header data-title="Ranking">
  32. <nav class="left">
  33. <button data-icon="list" data-view-aside="menu"></button>
  34. </nav>
  35. <nav class="on-right"></nav>
  36. </header>
  37. <article id="byDriver" class="list scroll">
  38. <ul>
  39. <li><h1>Drivers</h1></li>
  40. <li data-view-section="driver">Hamilton</li>
  41. <li data-view-section="driver">Vettel</li>
  42. <li data-view-section="driver">Webber</li>
  43. <li data-view-section="driver">Alonso</li>
  44. </ul>
  45. </article>
  46. <article id="byTeam" class="list scroll">
  47. <ul>
  48. <li><h1>Teams</h1></li>
  49. <li data-view-section="driver">Ferrari</li>
  50. <li data-view-section="driver">McLaren</li>
  51. <li data-view-section="driver">RedBull</li>
  52. <li data-view-section="driver">Renault</li>
  53. </ul>
  54. </article>
  55. <footer>
  56. <nav>
  57. <a href="#" data-view-article="byDriver">drivers</a>
  58. <a href="#" data-view-article="byTeam">teams</a>
  59. </nav>
  60. </footer>
  61. </section>
  62. <section id="events" data-transition="slide" data-aside="menu">
  63. <header data-title="Events">
  64. <nav class="left">
  65. <button data-icon="list" data-view-aside="menu"></button>
  66. </nav>
  67. <nav class="on-right"></nav>
  68. </header>
  69. <article id="events-f1" class="list scroll">
  70. <ul>
  71. <li data-view-section="eventInfo">Barcelona</li>
  72. <li data-view-section="eventInfo">Laguna seca</li>
  73. <li data-view-section="eventInfo">Spa-Francochamps</li>
  74. <li data-view-section="eventInfo">Nordschleife</li>
  75. <li data-view-section="eventInfo">Monaco</li>
  76. </ul>
  77. </article>
  78. </section>
  79. <!-- Lungo dependencies -->
  80. <script src="../components/quojs/quo.js"></script>
  81. <script src="../../build/lungo.debug.js"></script>
  82. <!-- LungoJS - Sandbox App -->
  83. <script>
  84. Lungo.init({
  85. name: 'Tablet tests',
  86. version: '2.2',
  87. history: false
  88. });
  89. </script>
  90. </body>
  91. </html>