framework7rails 3.0.0 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (212) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/lib/framework7rails/version.rb +2 -2
  4. data/update_from_vendor.rb +1 -1
  5. data/vendor/assets/javascripts/framework7.js +5806 -2303
  6. data/vendor/assets/javascripts/framework7.js.map +1 -1
  7. data/vendor/assets/stylesheets/framework7.css +2164 -464
  8. data/vendor/assets/stylesheets/framework7.themes.css +189 -25
  9. metadata +2 -205
  10. data/Framework7-0.9.6/.gitignore +0 -5
  11. data/Framework7-0.9.6/.jshintrc +0 -33
  12. data/Framework7-0.9.6/.travis.yml +0 -5
  13. data/Framework7-0.9.6/CHANGELOG.md +0 -342
  14. data/Framework7-0.9.6/Gruntfile.js +0 -560
  15. data/Framework7-0.9.6/LICENSE +0 -20
  16. data/Framework7-0.9.6/README.md +0 -113
  17. data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
  18. data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
  19. data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
  20. data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
  21. data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
  22. data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
  23. data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
  24. data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
  25. data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
  26. data/Framework7-0.9.6/apps/todo7/index.html +0 -112
  27. data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
  28. data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
  29. data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
  30. data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
  31. data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
  32. data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
  33. data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
  34. data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
  35. data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
  36. data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
  37. data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
  38. data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
  39. data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
  40. data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
  41. data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
  42. data/Framework7-0.9.6/apps/weather7/index.html +0 -127
  43. data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
  44. data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
  45. data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
  46. data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
  47. data/Framework7-0.9.6/bower.json +0 -30
  48. data/Framework7-0.9.6/dist/about.html +0 -28
  49. data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
  50. data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
  51. data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
  52. data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
  53. data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
  54. data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
  55. data/Framework7-0.9.6/dist/css/my-app.css +0 -0
  56. data/Framework7-0.9.6/dist/form.html +0 -229
  57. data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
  58. data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
  59. data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
  60. data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
  61. data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
  62. data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
  63. data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
  64. data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
  65. data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
  66. data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
  67. data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
  68. data/Framework7-0.9.6/dist/index.html +0 -102
  69. data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
  70. data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
  71. data/Framework7-0.9.6/dist/js/my-app.js +0 -48
  72. data/Framework7-0.9.6/dist/services.html +0 -28
  73. data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
  74. data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
  75. data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
  76. data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
  77. data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
  78. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
  79. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
  80. data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
  81. data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
  82. data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
  83. data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
  84. data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
  85. data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
  86. data/Framework7-0.9.6/examples/split-view/about.html +0 -19
  87. data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
  88. data/Framework7-0.9.6/examples/split-view/index.html +0 -135
  89. data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
  90. data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
  91. data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
  92. data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
  93. data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
  94. data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
  95. data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
  96. data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
  97. data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
  98. data/Framework7-0.9.6/examples/split-view/services.html +0 -19
  99. data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
  100. data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
  101. data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
  102. data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
  103. data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
  104. data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
  105. data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
  106. data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
  107. data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
  108. data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
  109. data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
  110. data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
  111. data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
  112. data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
  113. data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
  114. data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
  115. data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
  116. data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
  117. data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
  118. data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
  119. data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
  120. data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
  121. data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
  122. data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
  123. data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
  124. data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
  125. data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
  126. data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
  127. data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
  128. data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
  129. data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
  130. data/Framework7-0.9.6/kitchen-sink/index.html +0 -466
  131. data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
  132. data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
  133. data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
  134. data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
  135. data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
  136. data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
  137. data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
  138. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
  139. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
  140. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
  141. data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
  142. data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
  143. data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
  144. data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
  145. data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
  146. data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
  147. data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
  148. data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
  149. data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
  150. data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
  151. data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
  152. data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
  153. data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
  154. data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
  155. data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
  156. data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
  157. data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
  158. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
  159. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
  160. data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
  161. data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
  162. data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
  163. data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
  164. data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
  165. data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
  166. data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
  167. data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
  168. data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
  169. data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
  170. data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
  171. data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
  172. data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
  173. data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
  174. data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
  175. data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
  176. data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
  177. data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
  178. data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
  179. data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
  180. data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
  181. data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
  182. data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
  183. data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
  184. data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
  185. data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
  186. data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
  187. data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
  188. data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
  189. data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
  190. data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
  191. data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
  192. data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
  193. data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
  194. data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
  195. data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
  196. data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
  197. data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
  198. data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
  199. data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
  200. data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
  201. data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
  202. data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
  203. data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
  204. data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
  205. data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
  206. data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
  207. data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
  208. data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
  209. data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
  210. data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
  211. data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
  212. data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,54 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Tab Bar With Labels
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="tabbar-labels").no-toolbar.tabbar-labels-fixed
13
- .toolbar.tabbar.tabbar-labels
14
- .toolbar-inner
15
- a(href="#tab-1").tab-link.active
16
- i.icon.ks-tabbar-icon-1
17
- span.tabbar-label Information
18
- a(href="#tab-2").tab-link
19
- i.icon.ks-tabbar-icon-2
20
- span.badge.bg-red 4
21
- span.tabbar-label Inbox
22
- a(href="#tab-3").tab-link
23
- i.icon.ks-tabbar-icon-3
24
- span.tabbar-label Upload
25
- a(href="#tab-4").tab-link
26
- i.icon.ks-tabbar-icon-4
27
- span.badge.bg-green 27
28
- span.tabbar-label Photos
29
- .page-content
30
- .tabs
31
- .tab.active#tab-1
32
- .content-block
33
- p This is tab 1 content
34
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.
35
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
36
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.
37
- .tab#tab-2
38
- .content-block
39
- p This is tab 2 content
40
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
41
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
42
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
43
- .tab#tab-3
44
- .content-block
45
- p This is tab 3 content
46
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
47
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
48
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
49
- .tab#tab-4
50
- .content-block
51
- p This is tab 4 content
52
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
53
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
54
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
@@ -1,50 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Tab Bar
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="tabbar").no-toolbar.toolbar-fixed
13
- .toolbar.tabbar
14
- .toolbar-inner
15
- a(href="#tab-1").tab-link.active
16
- i.icon.ks-tabbar-icon-1
17
- a(href="#tab-2").tab-link
18
- i.icon.ks-tabbar-icon-2
19
- span.badge.bg-red 9
20
- a(href="#tab-3").tab-link
21
- i.icon.ks-tabbar-icon-3
22
- a(href="#tab-4").tab-link
23
- i.icon.ks-tabbar-icon-4
24
- .page-content
25
- .tabs
26
- .tab.active#tab-1
27
- .content-block
28
- p This is tab 1 content
29
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.
30
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
31
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.
32
- .tab#tab-2
33
- .content-block
34
- p This is tab 2 content
35
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
36
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
37
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
38
- .tab#tab-3
39
- .content-block
40
- p This is tab 3 content
41
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
42
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
43
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
44
- .tab#tab-4
45
- .content-block
46
- p This is tab 4 content
47
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
48
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
49
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
50
-
@@ -1,34 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding
8
- .buttons-row
9
- a(href="#tab1").button.active.tab-link Tab 1
10
- a(href="#tab2").button.tab-link Tab 2
11
- a(href="#tab3").button.tab-link Tab 3
12
- .right
13
- a(href="#").link.open-panel.icon-only
14
- i.icon.icon-bars
15
- .pages.navbar-through
16
- .page(data-page="tabs")
17
- .page-content
18
- .tabs
19
- .tab(id="tab1").active
20
- .content-block
21
- p This is tab 1 content
22
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.
23
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
24
- .tab(id="tab2")
25
- .content-block
26
- p This is tab 2 content
27
- p Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.
28
- p Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.
29
- .tab(id="tab3")
30
- .content-block
31
- p This is tab 3 content
32
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
33
- p Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.
34
-
@@ -1,27 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Transitions
8
- .right
9
- a(href="#").open-panel.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="transitions")
13
- .page-content
14
- .content-block-title Pages Animation
15
- .content-block
16
- .content-block-inner
17
- p One of the main target of Framework7 is to have native look and feel of iOS7 application. And Framework7 is the only framework that solves it and offers 1:1 page animation with smooth parallax effect, changing opacity and shadow of newly loaded page.
18
- .content-block-title Swipe Back
19
- .content-block
20
- .content-block-inner
21
- p Framework7 supports iOS7 well known swipe back gesture from left border of screen if you want to get to the previous page. It works, just swipe from left (or drag with mouse) area of this page to see smooth transition to previous page.
22
- .content-block-title Dynamic Navbar
23
- .content-block
24
- .content-block-inner
25
- p As said above Framework7 does everything to give you a feel of native iOS7 app. And one of significant features that will improve this feeling is the dynamic top navbar. You can see like its elements sliding/fading during pages transition.
26
-
27
-
@@ -1,442 +0,0 @@
1
- var myApp = new Framework7({
2
- modalTitle: 'Framework7',
3
- animateNavBackIcon: true,
4
- });
5
-
6
- // Expose Internal DOM library
7
- var $$ = Dom7;
8
-
9
- // Add main view
10
- var mainView = myApp.addView('.view-main', {
11
- // Enable Dynamic Navbar for this view
12
- dynamicNavbar: true
13
- });
14
- // Add another view, which is in right panel
15
- var rightView = myApp.addView('.view-right', {
16
- // Enable Dynamic Navbar for this view
17
- dynamicNavbar: true
18
- });
19
-
20
- // Show/hide preloader for remote ajax loaded pages
21
- // Probably should be removed on a production/local app
22
- $$(document).on('ajaxStart', function () {
23
- myApp.showIndicator();
24
- });
25
- $$(document).on('ajaxComplete', function () {
26
- myApp.hideIndicator();
27
- });
28
-
29
- // Callbacks for specific pages when it initialized
30
- /* ===== Modals Page events ===== */
31
- myApp.onPageInit('modals', function (page) {
32
- $$('.demo-alert').on('click', function () {
33
- myApp.alert('Hello!');
34
- });
35
- $$('.demo-confirm').on('click', function () {
36
- myApp.confirm('Are you feel good today?', function () {
37
- myApp.alert('Great!');
38
- });
39
- });
40
- $$('.demo-prompt').on('click', function () {
41
- myApp.prompt('What is your name?', function (data) {
42
- // @data contains input value
43
- myApp.confirm('Are you sure that your name is ' + data + '?', function () {
44
- myApp.alert('Ok, your name is ' + data + ' ;)');
45
- });
46
- });
47
- });
48
- $$('.demo-login').on('click', function () {
49
- myApp.modalLogin('Enter your username and password', function (username, password) {
50
- myApp.alert('Thank you! Username: ' + username + ', password: ' + password);
51
- });
52
- });
53
- $$('.demo-password').on('click', function () {
54
- myApp.modalPassword('Enter your password', function (password) {
55
- myApp.alert('Thank you! Password: ' + password);
56
- });
57
- });
58
- });
59
-
60
- /* ===== Preloader Page events ===== */
61
- myApp.onPageInit('preloader', function (page) {
62
- $$('.demo-indicator').on('click', function () {
63
- myApp.showIndicator();
64
- setTimeout(function () {
65
- myApp.hideIndicator();
66
- }, 2000);
67
- });
68
- $$('.demo-preloader').on('click', function () {
69
- myApp.showPreloader();
70
- setTimeout(function () {
71
- myApp.hidePreloader();
72
- }, 2000);
73
- });
74
- $$('.demo-preloader-custom').on('click', function () {
75
- myApp.showPreloader('My text...');
76
- setTimeout(function () {
77
- myApp.hidePreloader();
78
- }, 2000);
79
- });
80
- });
81
-
82
- /* ===== Swipe to delete events callback demo ===== */
83
- myApp.onPageInit('swipe-delete', function (page) {
84
- $$('.demo-remove-callback').on('deleted', function () {
85
- myApp.alert('Thanks, item removed!');
86
- });
87
- });
88
- myApp.onPageInit('swipe-delete media-lists', function (page) {
89
- $$('.demo-reply').on('click', function () {
90
- myApp.alert('Reply');
91
- });
92
- $$('.demo-mark').on('click', function () {
93
- myApp.alert('Mark');
94
- });
95
- $$('.demo-forward').on('click', function () {
96
- myApp.alert('Forward');
97
- });
98
- });
99
-
100
-
101
- /* ===== Action sheet, we use it on few pages ===== */
102
- myApp.onPageInit('swipe-delete modals media-lists', function (page) {
103
- var actionSheetButtons = [
104
- // First buttons group
105
- [
106
- // Group Label
107
- {
108
- text: 'Here comes some optional description or warning for actions below',
109
- label: true
110
- },
111
- // First button
112
- {
113
- text: 'Alert',
114
- onClick: function () {
115
- myApp.alert('He Hoou!');
116
- }
117
- },
118
- // Another red button
119
- {
120
- text: 'Nice Red Button ',
121
- color: 'red',
122
- onClick: function () {
123
- myApp.alert('You have clicked red button!');
124
- }
125
- },
126
- ],
127
- // Second group
128
- [
129
- {
130
- text: 'Cancel',
131
- bold: true
132
- }
133
- ]
134
- ];
135
- $$('.demo-actions').on('click', function (e) {
136
- myApp.actions(actionSheetButtons);
137
- });
138
- $$('.demo-actions-popover').on('click', function (e) {
139
- // We need to pass additional target parameter (this) for popover
140
- myApp.actions(this, actionSheetButtons);
141
- });
142
-
143
- });
144
-
145
- /* ===== Messages Page ===== */
146
- myApp.onPageInit('messages', function (page) {
147
- var conversationStarted = false;
148
- var answers = [
149
- 'Yes!',
150
- 'No',
151
- 'Hm...',
152
- 'I am not sure',
153
- 'And what about you?',
154
- 'May be ;)',
155
- 'Lorem ipsum dolor sit amet, consectetur',
156
- 'What?',
157
- 'Are you sure?',
158
- 'Of course',
159
- 'Need to think about it',
160
- 'Amazing!!!',
161
- ];
162
- var people = [
163
- {
164
- name: 'Kate Johnson',
165
- avatar: 'http://lorempixel.com/output/people-q-c-100-100-9.jpg'
166
- },
167
- {
168
- name: 'Blue Ninja',
169
- avatar: 'http://lorempixel.com/output/people-q-c-100-100-7.jpg'
170
- },
171
-
172
- ];
173
- var answerTimeout;
174
- $$('.messagebar a.link').on('click', function () {
175
- var textarea = $$('.messagebar textarea');
176
- var messageText = textarea.val();
177
- if (messageText.length === 0) return;
178
- // Empty textarea
179
- textarea.val('').trigger('change');
180
- // Add Message
181
- myApp.addMessage({
182
- text: messageText,
183
- type: 'sent',
184
- day: !conversationStarted ? 'Today' : false,
185
- time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
186
- });
187
- conversationStarted = true;
188
- // Add answer after timeout
189
- if (answerTimeout) clearTimeout(answerTimeout);
190
- answerTimeout = setTimeout(function () {
191
- var answerText = answers[Math.floor(Math.random() * answers.length)];
192
- var person = people[Math.floor(Math.random() * people.length)];
193
- myApp.addMessage({
194
- text: answers[Math.floor(Math.random() * answers.length)],
195
- type: 'received',
196
- name: person.name,
197
- avatar: person.avatar
198
- });
199
- }, 2000);
200
- });
201
- });
202
-
203
- /* ===== Pull To Refresh Demo ===== */
204
- myApp.onPageInit('pull-to-refresh', function (page) {
205
- // Dummy Content
206
- var songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
207
- var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
208
- // Pull to refresh content
209
- var ptrContent = $$(page.container).find('.pull-to-refresh-content');
210
- // Add 'refresh' listener on it
211
- ptrContent.on('refresh', function (e) {
212
- // Emulate 2s loading
213
- setTimeout(function () {
214
- var picURL = 'http://hhhhold.com/88/d/jpg?' + Math.round(Math.random() * 100);
215
- var song = songs[Math.floor(Math.random() * songs.length)];
216
- var author = authors[Math.floor(Math.random() * authors.length)];
217
- var linkHTML = '<li class="item-content">' +
218
- '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
219
- '<div class="item-inner">' +
220
- '<div class="item-title-row">' +
221
- '<div class="item-title">' + song + '</div>' +
222
- '</div>' +
223
- '<div class="item-subtitle">' + author + '</div>' +
224
- '</div>' +
225
- '</li>';
226
- ptrContent.find('ul').prepend(linkHTML);
227
- // When loading done, we need to "close" it
228
- myApp.pullToRefreshDone();
229
- }, 2000);
230
- });
231
- });
232
-
233
- /* ===== Sortable page ===== */
234
- myApp.onPageInit('sortable-list', function (page) {
235
- // Sortable toggler
236
- $$('.list-block.sortable').on('open', function () {
237
- $$('.toggle-sortable').text('Done');
238
- });
239
- $$('.list-block.sortable').on('close', function () {
240
- $$('.toggle-sortable').text('Edit');
241
- });
242
- });
243
-
244
- /* ===== Photo Browser Examples ===== */
245
- // Create photoprobsers first:
246
- var photoBrowserPhotos = [
247
- {
248
- url: 'img/beach.jpg',
249
- caption: 'Amazing beach in Goa, India'
250
- },
251
- 'http://placekitten.com/1024/1024',
252
- 'img/lock.jpg',
253
- {
254
- url: 'img/monkey.jpg',
255
- caption: 'I met this monkey in Chinese mountains'
256
- },
257
- {
258
- url: 'img/mountains.jpg',
259
- caption: 'Beautiful mountains in Zhangjiajie, China'
260
- }
261
-
262
- ];
263
- var photoBrowserStandalone = myApp.photoBrowser({
264
- photos: photoBrowserPhotos
265
- });
266
- var photoBrowserPopup = myApp.photoBrowser({
267
- photos: photoBrowserPhotos,
268
- type: 'popup'
269
- });
270
- var photoBrowserPage = myApp.photoBrowser({
271
- photos: photoBrowserPhotos,
272
- type: 'page',
273
- backLinkText: 'Back'
274
- });
275
- var photoBrowserDark = myApp.photoBrowser({
276
- photos: photoBrowserPhotos,
277
- theme: 'dark'
278
- });
279
- var photoBrowserPopupDark = myApp.photoBrowser({
280
- photos: photoBrowserPhotos,
281
- theme: 'dark',
282
- type: 'popup'
283
- });
284
- myApp.onPageInit('photo-browser', function (page) {
285
- $$('.ks-pb-standalone').on('click', function () {
286
- photoBrowserStandalone.open();
287
- });
288
- $$('.ks-pb-popup').on('click', function () {
289
- photoBrowserPopup.open();
290
- });
291
- $$('.ks-pb-page').on('click', function () {
292
- photoBrowserPage.open();
293
- });
294
- $$('.ks-pb-popup-dark').on('click', function () {
295
- photoBrowserPopupDark.open();
296
- });
297
- $$('.ks-pb-standalone-dark').on('click', function () {
298
- photoBrowserDark.open();
299
- });
300
- });
301
-
302
- /* ===== Infinite Scroll Page ===== */
303
- myApp.onPageInit('infinite-scroll', function (page) {
304
- // Loading trigger
305
- var loading = false;
306
- // Last loaded index, we need to pass it to script
307
- var lastLoadedIndex = $$('.infinite-scroll .list-block li').length;
308
- // Attach 'infinite' event handler
309
- $$('.infinite-scroll').on('infinite', function () {
310
- // Exit, if loading in progress
311
- if (loading) return;
312
- // Set loading trigger
313
- loading = true;
314
- // Request some file with data
315
- $$.get('infinite-scroll-load.php', {leftIndex: lastLoadedIndex + 1}, function (data) {
316
- loading = false;
317
- if (data === '') {
318
- // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
319
- myApp.detachInfiniteScroll($$('.infinite-scroll'));
320
- }
321
- else {
322
- // Append loaded elements to list block
323
- $$('.infinite-scroll .list-block ul').append(data);
324
- // Update last loaded index
325
- lastLoadedIndex = $$('.infinite-scroll .list-block li').length;
326
- }
327
- });
328
- });
329
- });
330
-
331
- /* ===== Notifications Page ===== */
332
- myApp.onPageInit('notifications', function (page) {
333
- $$('.ks-notification-simple').on('click', function () {
334
- myApp.addNotification({
335
- title: 'Framework7',
336
- message: 'This is a simple notification message with title and message'
337
- });
338
- });
339
- $$('.ks-notification-full').on('click', function () {
340
- myApp.addNotification({
341
- title: 'Framework7',
342
- subtitle: 'Notification subtitle',
343
- message: 'This is a simple notification message with custom icon and subtitle',
344
- media: '<i class="icon icon-f7"></i>'
345
- });
346
- });
347
- $$('.ks-notification-custom').on('click', function () {
348
- myApp.addNotification({
349
- title: 'My Awesome App',
350
- subtitle: 'New message from John Doe',
351
- message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
352
- media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
353
- });
354
- });
355
- $$('.ks-notification-callback').on('click', function () {
356
- myApp.addNotification({
357
- title: 'My Awesome App',
358
- subtitle: 'New message from John Doe',
359
- message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
360
- media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
361
- onClose: function () {
362
- myApp.alert('Notification closed');
363
- }
364
- });
365
- });
366
- });
367
-
368
- /* ===== Login screen page events ===== */
369
- myApp.onPageInit('login-screen-embedded', function (page) {
370
- $$(page.container).find('.list-button').on('click', function () {
371
- var username = $$(page.container).find('input[name="username"]').val();
372
- var password = $$(page.container).find('input[name="password"]').val();
373
- myApp.alert('Username: ' + username + ', password: ' + password, function () {
374
- mainView.goBack();
375
- });
376
- });
377
- });
378
- $$('.login-screen').find('.list-button').on('click', function () {
379
- var username = $$('.login-screen').find('input[name="username"]').val();
380
- var password = $$('.login-screen').find('input[name="password"]').val();
381
- myApp.alert('Username: ' + username + ', password: ' + password, function () {
382
- myApp.closeModal('.login-screen');
383
- });
384
- });
385
-
386
- /* ===== Demo Popover ===== */
387
- $$('.popover a').on('click', function () {
388
- myApp.closeModal('.popover');
389
- });
390
-
391
- /* ===== Color themes ===== */
392
- myApp.onPageInit('color-themes', function (page) {
393
- var themes = 'theme-white theme-black theme-yellow theme-red theme-blue theme-green theme-pink theme-lightblue theme-orange theme-gray';
394
- var layouts = 'layout-dark layout-white';
395
- $$(page.container).find('.ks-color-theme').click(function () {
396
- $$('body').removeClass(themes).addClass('theme-' + $$(this).attr('data-theme'));
397
- });
398
- $$(page.container).find('.ks-layout-theme').click(function () {
399
- $$('body').removeClass(layouts).addClass('layout-' + $$(this).attr('data-theme'));
400
- });
401
- });
402
-
403
- /* ===== Change statusbar bg when panel opened/closed ===== */
404
- $$('.panel-left').on('open', function () {
405
- $$('.statusbar-overlay').addClass('with-panel-left');
406
- });
407
- $$('.panel-right').on('open', function () {
408
- $$('.statusbar-overlay').addClass('with-panel-right');
409
- });
410
- $$('.panel-left, .panel-right').on('close', function () {
411
- $$('.statusbar-overlay').removeClass('with-panel-left with-panel-right');
412
- });
413
-
414
- /* ===== Generate Content Dynamically ===== */
415
- var dynamicPageIndex = 0;
416
- function createContentPage() {
417
- mainView.loadContent(
418
- '<!-- Top Navbar-->' +
419
- '<div class="navbar">' +
420
- ' <div class="navbar-inner">' +
421
- ' <div class="left"><a href="#" class="back link">Back</a></div>' +
422
- ' <div class="center sliding">Dynamic Page ' + (++dynamicPageIndex) + '</div>' +
423
- ' </div>' +
424
- '</div>' +
425
- '<div class="pages">' +
426
- ' <!-- Page, data-page contains page name-->' +
427
- ' <div data-page="dynamic-content" class="page">' +
428
- ' <!-- Scrollable page content-->' +
429
- ' <div class="page-content">' +
430
- ' <div class="content-block">' +
431
- ' <div class="content-block-inner">' +
432
- ' <p>Here is a dynamic page created on ' + new Date() + ' !</p>' +
433
- ' <p>Go <a href="#" class="back">back</a> or generate <a href="#" class="ks-generate-page">one more page</a>.</p>' +
434
- ' </div>' +
435
- ' </div>' +
436
- ' </div>' +
437
- ' </div>' +
438
- '</div>'
439
- );
440
- return;
441
- }
442
- $$(document).on('click', '.ks-generate-page', createContentPage);