framework7rails 3.0.0 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/lib/framework7rails/version.rb +2 -2
- data/update_from_vendor.rb +1 -1
- data/vendor/assets/javascripts/framework7.js +5806 -2303
- data/vendor/assets/javascripts/framework7.js.map +1 -1
- data/vendor/assets/stylesheets/framework7.css +2164 -464
- data/vendor/assets/stylesheets/framework7.themes.css +189 -25
- metadata +2 -205
- data/Framework7-0.9.6/.gitignore +0 -5
- data/Framework7-0.9.6/.jshintrc +0 -33
- data/Framework7-0.9.6/.travis.yml +0 -5
- data/Framework7-0.9.6/CHANGELOG.md +0 -342
- data/Framework7-0.9.6/Gruntfile.js +0 -560
- data/Framework7-0.9.6/LICENSE +0 -20
- data/Framework7-0.9.6/README.md +0 -113
- data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
- data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/todo7/index.html +0 -112
- data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
- data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
- data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
- data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
- data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
- data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/index.html +0 -127
- data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
- data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
- data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
- data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
- data/Framework7-0.9.6/bower.json +0 -30
- data/Framework7-0.9.6/dist/about.html +0 -28
- data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
- data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
- data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
- data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
- data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
- data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
- data/Framework7-0.9.6/dist/css/my-app.css +0 -0
- data/Framework7-0.9.6/dist/form.html +0 -229
- data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
- data/Framework7-0.9.6/dist/index.html +0 -102
- data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
- data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
- data/Framework7-0.9.6/dist/js/my-app.js +0 -48
- data/Framework7-0.9.6/dist/services.html +0 -28
- data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
- data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
- data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
- data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
- data/Framework7-0.9.6/examples/split-view/about.html +0 -19
- data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
- data/Framework7-0.9.6/examples/split-view/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
- data/Framework7-0.9.6/examples/split-view/services.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
- data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
- data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
- data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
- data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
- data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
- data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
- data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
- data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
- data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
- data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
- data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
- data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
- data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
- data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
- data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
- data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
- data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/index.html +0 -466
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
- data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
- data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
- data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
- data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
- data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
- data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
- data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
- data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
- data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
- data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
- data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
- data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
- data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
- data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
- data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
- data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
- data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
- data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
- data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
- data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
- data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
- data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
- data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
- data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
- data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
- data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
- data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
- data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
- data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
- data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
- data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
- data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
- data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
- data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
- data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
- data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
- data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
- data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
- data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
- data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
- data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,74 +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 Core Features
|
8
|
-
.right
|
9
|
-
a(href="#").open-panel.link.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="core-features")
|
13
|
-
.page-content
|
14
|
-
.content-block-title Ultra Easy To Use
|
15
|
-
.content-block
|
16
|
-
.content-block-inner
|
17
|
-
p All you need to make it work is a simple HTML layout and two lines of JavaScript:
|
18
|
-
p var app = new Framework7();<br>app.addView('.main-view');
|
19
|
-
|
20
|
-
.content-block-title Custom DOM Library
|
21
|
-
.content-block
|
22
|
-
.content-block-inner
|
23
|
-
p Framework7 is library agnostic, so you don't need to use any other library (like jQuery, Zepto, Mootols, etc) to make it work. If you need to work with DOM (like jQuery) Framework7 may help you to avoid, it contains custom function to work with DOM. Its syntax is the same as in jQuery with almost the same methods, and also support jQuery-like chaining! The following methods are available with the same syntax and functionality:
|
24
|
-
b .addClass()
|
25
|
-
b .removeClass()
|
26
|
-
b .hasClass()
|
27
|
-
b .toggleClass()
|
28
|
-
b .on()
|
29
|
-
b .off()
|
30
|
-
b .attr()
|
31
|
-
b .transform()
|
32
|
-
b .transition()
|
33
|
-
b .transitionEnd()
|
34
|
-
b .animationEnd()
|
35
|
-
b .width()
|
36
|
-
b .offset()
|
37
|
-
b .html()
|
38
|
-
b .is()
|
39
|
-
b .parents()
|
40
|
-
b .parent()
|
41
|
-
b .children()
|
42
|
-
b .append()
|
43
|
-
b .prepend()
|
44
|
-
b .find()
|
45
|
-
b .remove()
|
46
|
-
p This function can be exposed for your usage by calling for example $ = app.$;
|
47
|
-
.content-block-title XHR + Caching
|
48
|
-
.content-block
|
49
|
-
.content-block-inner
|
50
|
-
p Framework7 utilizes own methods to load pages via Ajax with internal configurable caching that allows to load pages faster and saves a lot of traffic for your users!
|
51
|
-
.content-block-title History
|
52
|
-
.content-block
|
53
|
-
.content-block-inner
|
54
|
-
p When you navigate deeper and deeper you may face a problem about how to get back in the same order? Framework7 solves this problem by collecting navigation history. It is epsecially good if your users may come to the same page from different pages. And with Framework7 it is enough just to add "back" class to your link, and it will recognize what page to load.
|
55
|
-
.content-block-title Previous Page Preloading
|
56
|
-
.content-block
|
57
|
-
.content-block-inner
|
58
|
-
p Framework7 preloads previous page (when available) so your users can always do the nice swipe back gesture to get that page.
|
59
|
-
.content-block-title Multiple Views
|
60
|
-
.content-block
|
61
|
-
.content-block-inner
|
62
|
-
p Framework7 supports unlimited number of different isolated views, like the main view where you are reading this text and another view in <a href="#" class="open-panel" data-panel="right">right panel</a>. And the fun thing is that you can control one view from another by using "data-view" attribute on links.
|
63
|
-
.content-block-title Performant Animations
|
64
|
-
.content-block
|
65
|
-
.content-block-inner
|
66
|
-
p It is all about performance and Framework7 uses high performance css animations and 3d transformations to achieve the best result.
|
67
|
-
.content-block-title Easy To Customize
|
68
|
-
.content-block
|
69
|
-
.content-block-inner
|
70
|
-
p With Framework7 everything is simple, all styles are divided by parts into small .less files, so you can easy, very easy, bring your own custom styles to your app.
|
71
|
-
.content-block-title Ultra Lightweight
|
72
|
-
.content-block
|
73
|
-
.content-block-inner
|
74
|
-
p Framework7 is a library agnostic and ultra lightweight.
|
@@ -1,15 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="index.html").back.link Deep Navbar
|
5
|
-
.center.sliding Deep 2
|
6
|
-
.right.sliding
|
7
|
-
a(href="deep-navbar-3.html").link Deep 3
|
8
|
-
.pages.navbar-through
|
9
|
-
.page(data-page="deep-navbar-2")
|
10
|
-
.page-content
|
11
|
-
.content-block
|
12
|
-
p
|
13
|
-
a.button(href="deep-navbar-3.html") Go to page 3
|
14
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
|
15
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
|
@@ -1,15 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="index.html").back.link Deep 2
|
5
|
-
.center.sliding Deep 3
|
6
|
-
.right.sliding
|
7
|
-
a(href="index.html").link Framework7
|
8
|
-
.pages.navbar-through
|
9
|
-
.page(data-page="deep-navbar-3")
|
10
|
-
.page-content
|
11
|
-
.content-block
|
12
|
-
p
|
13
|
-
a.button(href="index.html") Go to home page
|
14
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
|
15
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.
|
@@ -1,15 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="index.html").back.link Navbars
|
5
|
-
.center.sliding Deep Navbar
|
6
|
-
.right.sliding
|
7
|
-
a(href="deep-navbar-2.html").link Deep 2
|
8
|
-
.pages.navbar-through
|
9
|
-
.page(data-page="deep-navbar")
|
10
|
-
.page-content
|
11
|
-
.content-block
|
12
|
-
p This demo demonstrates Framework7 exclusive behavior of dynamic sliding navigation bars. Just click the button below and look how navbar links will change. And don't forget to try swipe-back gesture on next pages:
|
13
|
-
p
|
14
|
-
a.button(href="deep-navbar-2.html") Go to page 2
|
15
|
-
|
@@ -1,71 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="forms.html").back.link
|
5
|
-
i.icon.icon-back
|
6
|
-
span Forms
|
7
|
-
.center.sliding Buttons
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="form-buttons")
|
13
|
-
.page-content
|
14
|
-
.content-block-title Usual Buttons
|
15
|
-
.content-block
|
16
|
-
.row
|
17
|
-
.col-33
|
18
|
-
a(href="#").button.active Active
|
19
|
-
.col-33
|
20
|
-
a(href="#").button Button
|
21
|
-
.col-33
|
22
|
-
a(href="#").button.button-round Round
|
23
|
-
.content-block
|
24
|
-
.row
|
25
|
-
.col-50
|
26
|
-
a(href="#").button.active Active
|
27
|
-
.col-50
|
28
|
-
a(href="#").button Button
|
29
|
-
.content-block
|
30
|
-
.buttons-row
|
31
|
-
a(href="#").button Button
|
32
|
-
a(href="#").button Button
|
33
|
-
.content-block
|
34
|
-
.buttons-row
|
35
|
-
a(href="#").button.button-round Button
|
36
|
-
a(href="#").button.button-round Button
|
37
|
-
a(href="#").button.button-round Button
|
38
|
-
.content-block
|
39
|
-
.buttons-row
|
40
|
-
a(href="#").button Button
|
41
|
-
a(href="#").button.active Button
|
42
|
-
a(href="#").button Button
|
43
|
-
a(href="#").button Button
|
44
|
-
|
45
|
-
.content-block-title Big Buttons
|
46
|
-
.content-block
|
47
|
-
.row
|
48
|
-
.col-50
|
49
|
-
a(href="#").button.button-big.active Active
|
50
|
-
.col-50
|
51
|
-
a(href="#").button.button-big Button
|
52
|
-
.content-block-title Themed Fill Buttons
|
53
|
-
.content-block
|
54
|
-
.row
|
55
|
-
.col-50
|
56
|
-
a(href="#").button.button-big.button-fill.color-green Submit
|
57
|
-
.col-50
|
58
|
-
a(href="#").button.button-big.button-fill.color-red Cancel
|
59
|
-
.content-block-title List-Block Buttons
|
60
|
-
.list-block.inset
|
61
|
-
ul
|
62
|
-
li
|
63
|
-
a(href="#").list-button.item-link List Button 1
|
64
|
-
li
|
65
|
-
a(href="#").list-button.item-link List Button 2
|
66
|
-
li
|
67
|
-
a(href="#").list-button.item-link List Button 2
|
68
|
-
.list-block.inset
|
69
|
-
ul
|
70
|
-
li
|
71
|
-
a(href="#").list-button.item-link.color-red Big Red Button
|
@@ -1,152 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="forms.html").back.link
|
5
|
-
i.icon.icon-back
|
6
|
-
span Forms
|
7
|
-
.center.sliding Checkboxes And Radios
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="forms-checkboxes")
|
13
|
-
.page-content
|
14
|
-
.content-block-title Checkbox group
|
15
|
-
.list-block
|
16
|
-
ul
|
17
|
-
li
|
18
|
-
label.label-checkbox.item-content
|
19
|
-
input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
|
20
|
-
.item-media
|
21
|
-
i.icon.icon-form-checkbox
|
22
|
-
.item-inner
|
23
|
-
.item-title Books
|
24
|
-
li
|
25
|
-
label.label-checkbox.item-content
|
26
|
-
input(type="checkbox", name="ks-checkbox", value="Movies")
|
27
|
-
.item-media
|
28
|
-
i.icon.icon-form-checkbox
|
29
|
-
.item-inner
|
30
|
-
.item-title Movies
|
31
|
-
li
|
32
|
-
label.label-checkbox.item-content
|
33
|
-
input(type="checkbox", name="ks-checkbox", value="Food")
|
34
|
-
.item-media
|
35
|
-
i.icon.icon-form-checkbox
|
36
|
-
.item-inner
|
37
|
-
.item-title Food
|
38
|
-
li
|
39
|
-
label.label-checkbox.item-content
|
40
|
-
input(type="checkbox", name="ks-checkbox", value="Drinks")
|
41
|
-
.item-media
|
42
|
-
i.icon.icon-form-checkbox
|
43
|
-
.item-inner
|
44
|
-
.item-title Drinks
|
45
|
-
.content-block-title Radio buttons group
|
46
|
-
.list-block
|
47
|
-
ul
|
48
|
-
li
|
49
|
-
label.label-radio.item-content
|
50
|
-
input(type="radio", name="ks-radio", value="Books", checked=true)
|
51
|
-
.item-inner
|
52
|
-
.item-title Books
|
53
|
-
li
|
54
|
-
label.label-radio.item-content
|
55
|
-
input(type="radio", name="ks-radio", value="Movies")
|
56
|
-
.item-inner
|
57
|
-
.item-title Movies
|
58
|
-
li
|
59
|
-
label.label-radio.item-content
|
60
|
-
input(type="radio", name="ks-radio", value="Food")
|
61
|
-
.item-inner
|
62
|
-
.item-title Food
|
63
|
-
li
|
64
|
-
label.label-radio.item-content
|
65
|
-
input(type="radio", name="ks-radio", value="Drinks")
|
66
|
-
.item-inner
|
67
|
-
.item-title Drinks
|
68
|
-
.content-block-title With Media Lists
|
69
|
-
.list-block.media-list
|
70
|
-
ul
|
71
|
-
li
|
72
|
-
label.label-checkbox.item-content
|
73
|
-
input(type="checkbox", name="ks-media-checkbox", value="1")
|
74
|
-
.item-media
|
75
|
-
i.icon.icon-form-checkbox
|
76
|
-
.item-inner
|
77
|
-
.item-title-row
|
78
|
-
.item-title Facebook
|
79
|
-
.item-after 17:14
|
80
|
-
.item-subtitle New messages from John Doe
|
81
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
82
|
-
|
83
|
-
li
|
84
|
-
label.label-checkbox.item-content
|
85
|
-
input(type="checkbox", name="ks-media-checkbox", value="2")
|
86
|
-
.item-media
|
87
|
-
i.icon.icon-form-checkbox
|
88
|
-
.item-inner
|
89
|
-
.item-title-row
|
90
|
-
.item-title John Doe (via Twitter)
|
91
|
-
.item-after 17:11
|
92
|
-
.item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
|
93
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
94
|
-
|
95
|
-
li
|
96
|
-
label.label-checkbox.item-content
|
97
|
-
input(type="checkbox", name="ks-media-checkbox", value="3")
|
98
|
-
.item-media
|
99
|
-
i.icon.icon-form-checkbox
|
100
|
-
.item-inner
|
101
|
-
.item-title-row
|
102
|
-
.item-title Facebook
|
103
|
-
.item-after 16:48
|
104
|
-
.item-subtitle New messages from John Doe
|
105
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
106
|
-
li
|
107
|
-
label.label-checkbox.item-content
|
108
|
-
input(type="checkbox", name="ks-media-checkbox", value="4")
|
109
|
-
.item-media
|
110
|
-
i.icon.icon-form-checkbox
|
111
|
-
.item-inner
|
112
|
-
.item-title-row
|
113
|
-
.item-title John Doe (via Twitter)
|
114
|
-
.item-after 15:32
|
115
|
-
.item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
|
116
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
117
|
-
.content-block-title What is your favourite song?
|
118
|
-
.list-block.media-list
|
119
|
-
ul
|
120
|
-
li
|
121
|
-
label.label-radio.item-content
|
122
|
-
input(type="radio", name="ks-media-radio", value="1", checked=true)
|
123
|
-
.item-media
|
124
|
-
img(src="http://hhhhold.com/160/d/jpg?1", width="80")
|
125
|
-
.item-inner
|
126
|
-
.item-title-row
|
127
|
-
.item-title Yellow Submarine
|
128
|
-
.item-after $15
|
129
|
-
.item-subtitle Beatles
|
130
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
131
|
-
li
|
132
|
-
label.label-radio.item-content
|
133
|
-
input(type="radio", name="ks-media-radio", value="2")
|
134
|
-
.item-media
|
135
|
-
img(src="http://hhhhold.com/160/d/jpg?2", width="80")
|
136
|
-
.item-inner
|
137
|
-
.item-title-row
|
138
|
-
.item-title Don't Stop Me Now
|
139
|
-
.item-after $22
|
140
|
-
.item-subtitle Queen
|
141
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
142
|
-
li
|
143
|
-
label.label-radio.item-content
|
144
|
-
input(type="radio", name="ks-media-radio", value="3")
|
145
|
-
.item-media
|
146
|
-
img(src="http://hhhhold.com/160/d/jpg?3", width="80")
|
147
|
-
.item-inner
|
148
|
-
.item-title-row
|
149
|
-
.item-title Billie Jean
|
150
|
-
.item-after $16
|
151
|
-
.item-subtitle Michael Jackson
|
152
|
-
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
@@ -1,239 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left.sliding
|
4
|
-
a(href="forms.html").back.link
|
5
|
-
i.icon.icon-back
|
6
|
-
span Forms
|
7
|
-
.center.sliding Form Elements
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="form-elements")
|
13
|
-
.page-content
|
14
|
-
.content-block-title Full Layout
|
15
|
-
.list-block
|
16
|
-
ul
|
17
|
-
li
|
18
|
-
.item-content
|
19
|
-
.item-media
|
20
|
-
i.icon.icon-form-name
|
21
|
-
.item-inner
|
22
|
-
.item-title.label Name
|
23
|
-
.item-input
|
24
|
-
input(type="text", placeholder="Your name")
|
25
|
-
li
|
26
|
-
.item-content
|
27
|
-
.item-media
|
28
|
-
i.icon.icon-form-email
|
29
|
-
.item-inner
|
30
|
-
.item-title.label E-mail
|
31
|
-
.item-input
|
32
|
-
input(type="email", placeholder="E-mail")
|
33
|
-
li
|
34
|
-
.item-content
|
35
|
-
.item-media
|
36
|
-
i.icon.icon-form-url
|
37
|
-
.item-inner
|
38
|
-
.item-title.label URL
|
39
|
-
.item-input
|
40
|
-
input(type="url", placeholder="URL")
|
41
|
-
li
|
42
|
-
.item-content
|
43
|
-
.item-media
|
44
|
-
i.icon.icon-form-password
|
45
|
-
.item-inner
|
46
|
-
.item-title.label Password
|
47
|
-
.item-input
|
48
|
-
input(type="password", placeholder="Password")
|
49
|
-
li
|
50
|
-
.item-content
|
51
|
-
.item-media
|
52
|
-
i.icon.icon-form-tel
|
53
|
-
.item-inner
|
54
|
-
.item-title.label Phone
|
55
|
-
.item-input
|
56
|
-
input(type="tel", placeholder="Phone")
|
57
|
-
li
|
58
|
-
.item-content
|
59
|
-
.item-media
|
60
|
-
i.icon.icon-form-gender
|
61
|
-
.item-inner
|
62
|
-
.item-title.label Gender
|
63
|
-
.item-input
|
64
|
-
select
|
65
|
-
option Male
|
66
|
-
option Female
|
67
|
-
li
|
68
|
-
.item-content
|
69
|
-
.item-media
|
70
|
-
i.icon.icon-form-calendar
|
71
|
-
.item-inner
|
72
|
-
.item-title.label Birth date
|
73
|
-
.item-input
|
74
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|
75
|
-
li
|
76
|
-
.item-content
|
77
|
-
.item-media
|
78
|
-
i.icon.icon-form-calendar
|
79
|
-
.item-inner
|
80
|
-
.item-title.label Date time
|
81
|
-
.item-input
|
82
|
-
input(type="datetime-local", placeholder="Birth day")
|
83
|
-
li
|
84
|
-
.item-content
|
85
|
-
.item-media
|
86
|
-
i.icon.icon-form-toggle
|
87
|
-
.item-inner
|
88
|
-
.item-title.label Switch
|
89
|
-
.item-input
|
90
|
-
label.label-switch
|
91
|
-
input(type="checkbox")
|
92
|
-
.checkbox
|
93
|
-
li
|
94
|
-
.item-content
|
95
|
-
.item-media
|
96
|
-
i.icon.icon-form-settings
|
97
|
-
.item-inner
|
98
|
-
.item-title.label Slider
|
99
|
-
.item-input
|
100
|
-
.range-slider
|
101
|
-
input(type="range", min="0", max="100", value="50", step="0.1")
|
102
|
-
li.align-top
|
103
|
-
.item-content
|
104
|
-
.item-media
|
105
|
-
i.icon.icon-form-comment
|
106
|
-
.item-inner
|
107
|
-
.item-title.label Textarea
|
108
|
-
.item-input
|
109
|
-
textarea
|
110
|
-
.content-block-title Icons and inputs
|
111
|
-
.list-block
|
112
|
-
ul
|
113
|
-
li
|
114
|
-
.item-content
|
115
|
-
.item-media
|
116
|
-
i.icon.icon-form-name
|
117
|
-
.item-inner
|
118
|
-
.item-input
|
119
|
-
input(type="text", placeholder="Your name")
|
120
|
-
li
|
121
|
-
.item-content
|
122
|
-
.item-media
|
123
|
-
i.icon.icon-form-email
|
124
|
-
.item-inner
|
125
|
-
.item-input
|
126
|
-
input(type="email", placeholder="E-mail")
|
127
|
-
li
|
128
|
-
.item-content
|
129
|
-
.item-media
|
130
|
-
i.icon.icon-form-gender
|
131
|
-
.item-inner
|
132
|
-
.item-input
|
133
|
-
select
|
134
|
-
option Male
|
135
|
-
option Female
|
136
|
-
li
|
137
|
-
.item-content
|
138
|
-
.item-media
|
139
|
-
i.icon.icon-form-calendar
|
140
|
-
.item-inner
|
141
|
-
.item-input
|
142
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|
143
|
-
li
|
144
|
-
.item-content
|
145
|
-
.item-media
|
146
|
-
i.icon.icon-form-toggle
|
147
|
-
.item-inner
|
148
|
-
.item-input
|
149
|
-
label.label-switch
|
150
|
-
input(type="checkbox")
|
151
|
-
.checkbox
|
152
|
-
.content-block-title Labels and inputs
|
153
|
-
.list-block
|
154
|
-
ul
|
155
|
-
li
|
156
|
-
.item-content
|
157
|
-
.item-inner
|
158
|
-
.item-title.label Name
|
159
|
-
.item-input
|
160
|
-
input(type="text", placeholder="Your name")
|
161
|
-
li
|
162
|
-
.item-content
|
163
|
-
.item-inner
|
164
|
-
.item-title.label E-mail
|
165
|
-
.item-input
|
166
|
-
input(type="email", placeholder="E-mail")
|
167
|
-
li
|
168
|
-
.item-content
|
169
|
-
.item-inner
|
170
|
-
.item-title.label Gender
|
171
|
-
.item-input
|
172
|
-
select
|
173
|
-
option Male
|
174
|
-
option Female
|
175
|
-
li
|
176
|
-
.item-content
|
177
|
-
.item-inner
|
178
|
-
.item-title.label Birth date
|
179
|
-
.item-input
|
180
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|
181
|
-
li
|
182
|
-
.item-content
|
183
|
-
.item-inner
|
184
|
-
.item-title.label Switch
|
185
|
-
.item-input
|
186
|
-
label.label-switch
|
187
|
-
input(type="checkbox")
|
188
|
-
.checkbox
|
189
|
-
.content-block-title Just inputs
|
190
|
-
.list-block
|
191
|
-
ul
|
192
|
-
li
|
193
|
-
.item-content
|
194
|
-
.item-inner
|
195
|
-
.item-input
|
196
|
-
input(type="text", placeholder="Your name")
|
197
|
-
li
|
198
|
-
.item-content
|
199
|
-
.item-inner
|
200
|
-
.item-input
|
201
|
-
input(type="email", placeholder="E-mail")
|
202
|
-
li
|
203
|
-
.item-content
|
204
|
-
.item-inner
|
205
|
-
.item-input
|
206
|
-
select
|
207
|
-
option Male
|
208
|
-
option Female
|
209
|
-
li
|
210
|
-
.item-content
|
211
|
-
.item-inner
|
212
|
-
.item-input
|
213
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|
214
|
-
.content-block-title Inset, just inputs
|
215
|
-
.list-block.inset
|
216
|
-
ul
|
217
|
-
ul
|
218
|
-
li
|
219
|
-
.item-content
|
220
|
-
.item-inner
|
221
|
-
.item-input
|
222
|
-
input(type="text", placeholder="Your name")
|
223
|
-
li
|
224
|
-
.item-content
|
225
|
-
.item-inner
|
226
|
-
.item-input
|
227
|
-
input(type="email", placeholder="E-mail")
|
228
|
-
li
|
229
|
-
.item-content
|
230
|
-
.item-inner
|
231
|
-
.item-input
|
232
|
-
select
|
233
|
-
option Male
|
234
|
-
option Female
|
235
|
-
li
|
236
|
-
.item-content
|
237
|
-
.item-inner
|
238
|
-
.item-input
|
239
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|