tablet2.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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="format-detection" content="telephone=no">
  13. <meta http-equiv="cleartype" content="on">
  14. <!-- Main Stylesheet -->
  15. <link rel="stylesheet" href="../../package/lungo/lungo.css">
  16. <link rel="stylesheet" href="../../package/lungo/lungo.theme.css">
  17. <link rel="stylesheet" href="../../package/lungo.icon/lungo.icon.css">
  18. </head>
  19. <body>
  20. <aside id="menu">
  21. <header data-title="Formula1"></header>
  22. <article class="active list scroll">
  23. <ul>
  24. <li data-view-section="ranking">Rankig</li>
  25. <li data-view-section="events">Events</li>
  26. </ul>
  27. </article>
  28. </aside>
  29. <section id="ranking" data-transition="slide" data-aside="menu">
  30. <header data-title="Ranking">
  31. <nav class="left">
  32. <button data-icon="list" data-view-aside="menu"></button>
  33. </nav>
  34. <nav class="on-right"></nav>
  35. </header>
  36. <article id="byDriver" class="list scroll">
  37. <ul>
  38. <li><h1>Drivers</h1></li>
  39. <li data-view-section="driver">Hamilton</li>
  40. <li data-view-section="driver">Vettel</li>
  41. <li data-view-section="driver">Webber</li>
  42. <li data-view-section="driver">Alonso</li>
  43. </ul>
  44. </article>
  45. <article id="byTeam" class="list scroll">
  46. <ul>
  47. <li><h1>Teams</h1></li>
  48. <li data-view-section="driver">Ferrari</li>
  49. <li data-view-section="driver">McLaren</li>
  50. <li data-view-section="driver">RedBull</li>
  51. <li data-view-section="driver">Renault</li>
  52. </ul>
  53. </article>
  54. <footer>
  55. <nav>
  56. <a href="#" data-view-article="byDriver">drivers</a>
  57. <a href="#" data-view-article="byTeam">teams</a>
  58. </nav>
  59. </footer>
  60. </section>
  61. <section id="events" data-transition="slide" data-aside="menu">
  62. <header data-title="Events">
  63. <nav class="left">
  64. <button data-icon="list" data-view-aside="menu"></button>
  65. </nav>
  66. <nav class="on-right"></nav>
  67. </header>
  68. <article id="events-f1" class="list scroll">
  69. <ul>
  70. <li data-view-section="eventInfo">Barcelona</li>
  71. <li data-view-section="eventInfo">Laguna seca</li>
  72. <li data-view-section="eventInfo">Spa-Francochamps</li>
  73. <li data-view-section="eventInfo">Nordschleife</li>
  74. <li data-view-section="eventInfo">Monaco</li>
  75. </ul>
  76. </article>
  77. </section>
  78. <!-- Lungo dependencies -->
  79. <script src="../components/quojs/quo.js"></script>
  80. <script src="../../package/lungo/lungo.js"></script>
  81. <!-- LungoJS - Sandbox App -->
  82. <script>
  83. Lungo.init({
  84. name: 'Tablet tests',
  85. version: '2.2',
  86. history: false
  87. });
  88. </script>
  89. </body>
  90. </html>