navigation.tablet2.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lungo Flexbox - SDK</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="components/lungo.brownie/lungo.css">
  16. <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
  17. <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
  18. </head>
  19. <body>
  20. <aside id="menu" data-transition="left">
  21. <header data-title="My mailbox"></header>
  22. <article id="menu_article" class="active list scroll">
  23. <ul>
  24. <li data-view-article="incoming">Incoming</li>
  25. <li data-view-article="later">Later</li>
  26. <li data-view-article="lists">Lists</li>
  27. <li data-view-article="archived">Archived</li>
  28. <li data-view-section="clean">clean</li>
  29. </ul>
  30. </article>
  31. </aside>
  32. <aside id="menu2" data-transition="left">
  33. <header data-title="My mailbox 2"></header>
  34. <article id="menu_article" class="active list scroll">aaaa
  35. </article>
  36. </aside>
  37. <!-- ===================================================================================== -->
  38. <!-- ===================================================================================== -->
  39. <section id="incoming" data-transition="slide" data-aside="menu">
  40. <header data-title="Mail">
  41. <nav class="left">
  42. <button data-icon="list" data-view-aside="menu"></button>
  43. </nav>
  44. <nav class="right">
  45. </nav>
  46. </header>
  47. <article id="incoming" class="list scroll">
  48. <ul>
  49. <li data-view-section="mail2" class="text bold">Cirque du soleil</li>
  50. <li data-view-section="mail" class="text bold">Twitter</li>
  51. </ul>
  52. </article>
  53. <article id="later" class="list scroll">
  54. <ul>
  55. <li data-view-section="mail2" class="text bold">Later cirque du soleil</li>
  56. <li data-view-section="mail" class="text bold">Later twitter</li>
  57. </ul>
  58. </article>
  59. <article id="lists" class="list scroll">
  60. <ul>
  61. <li data-view-section="mail2" class="text bold">Lists cirque du soleil</li>
  62. <li data-view-section="mail" class="text bold">Lists twitter</li>
  63. </ul>
  64. </article>
  65. <article id="archived" class="list scroll">
  66. <ul>
  67. <li data-view-section="mail2" class="text bold">Archived cirque du soleil</li>
  68. <li data-view-section="mail" class="text bold">Archived twitter</li>
  69. </ul>
  70. </article>
  71. <footer>
  72. <nav>
  73. <a href="#" data-view-article="incoming">incoming</a>
  74. <a href="#" data-view-article="later">later</a>
  75. <a href="#" data-view-article="lists">lists</a>
  76. <a href="#" data-view-article="archived">archived</a>
  77. <a href="#" data-view-article="main_article_1">main_article_1</a>
  78. </nav>
  79. </footer>
  80. </section>
  81. <section id="mail2" data-aside="menu" data-transition="slide">
  82. <header data-title="First mail">
  83. <nav class="left">
  84. <button data-view-section="back">BaCk</button>
  85. </nav>
  86. </header>
  87. <article id="art_2">
  88. mail 1
  89. </article>
  90. </section>
  91. <section id="mail" data-aside="menu" data-transition="slide">
  92. <header data-title="Second mail">
  93. <nav class="left">
  94. <button data-view-section="back">BaCk</button>
  95. </nav>
  96. </header>
  97. <article id="art_1">
  98. mail 2
  99. </article>
  100. </section>
  101. <script src="components/quojs/quo.js"></script>
  102. <script src="components/lungo.brownie/lungo.debug.js"></script>
  103. <script>
  104. Lungo.init({
  105. name: 'Flexbox',
  106. version: '2.2',
  107. history: false
  108. });
  109. $$("[data-router=back]").tap(function(event) { Lungo.Router.back(); });
  110. </script>
  111. </body>
  112. </html>