framework7rails 0.9.7 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +17 -0
- data/Framework7-0.9.6/.gitignore +5 -0
- data/Framework7-0.9.6/.jshintrc +33 -0
- data/Framework7-0.9.6/.travis.yml +5 -0
- data/Framework7-0.9.6/CHANGELOG.md +342 -0
- data/Framework7-0.9.6/Gruntfile.js +560 -0
- data/Framework7-0.9.6/LICENSE +20 -0
- data/Framework7-0.9.6/README.md +113 -0
- data/Framework7-0.9.6/apps/todo7/css/todo7.css +208 -0
- 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 +112 -0
- data/Framework7-0.9.6/apps/todo7/jade/index.jade +99 -0
- data/Framework7-0.9.6/apps/todo7/js/todo7.js +102 -0
- data/Framework7-0.9.6/apps/todo7/less/todo7.less +221 -0
- data/Framework7-0.9.6/apps/todo7/manifest.php +27 -0
- data/Framework7-0.9.6/apps/weather7/css/weather7.css +291 -0
- 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 +127 -0
- data/Framework7-0.9.6/apps/weather7/jade/index.jade +113 -0
- data/Framework7-0.9.6/apps/weather7/js/weather7.js +213 -0
- data/Framework7-0.9.6/apps/weather7/less/weather7.less +294 -0
- data/Framework7-0.9.6/apps/weather7/manifest.php +29 -0
- data/Framework7-0.9.6/bower.json +30 -0
- data/Framework7-0.9.6/dist/about.html +28 -0
- data/Framework7-0.9.6/dist/css/framework7.css +4922 -0
- data/Framework7-0.9.6/dist/css/framework7.min.css +15 -0
- data/Framework7-0.9.6/dist/css/framework7.rtl.css +427 -0
- data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +1 -0
- data/Framework7-0.9.6/dist/css/framework7.themes.css +279 -0
- data/Framework7-0.9.6/dist/css/framework7.themes.min.css +1 -0
- data/Framework7-0.9.6/dist/css/my-app.css +0 -0
- data/Framework7-0.9.6/dist/form.html +229 -0
- 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 +102 -0
- data/Framework7-0.9.6/dist/js/framework7.js +7479 -0
- data/Framework7-0.9.6/dist/js/framework7.min.js +18 -0
- data/Framework7-0.9.6/dist/js/my-app.js +48 -0
- data/Framework7-0.9.6/dist/services.html +28 -0
- data/Framework7-0.9.6/examples/split-view/about.html +19 -0
- data/Framework7-0.9.6/examples/split-view/css/my-app.css +23 -0
- data/Framework7-0.9.6/examples/split-view/index.html +135 -0
- data/Framework7-0.9.6/examples/split-view/jade/about.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/index.jade +107 -0
- data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/services.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/split-view/left-page-1.html +19 -0
- data/Framework7-0.9.6/examples/split-view/left-page-2.html +19 -0
- data/Framework7-0.9.6/examples/split-view/less/my-app.less +23 -0
- data/Framework7-0.9.6/examples/split-view/services.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/about.html +20 -0
- data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +56 -0
- data/Framework7-0.9.6/examples/split-view-panel/index.html +135 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +18 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +107 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +18 -0
- data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +62 -0
- data/Framework7-0.9.6/examples/split-view-panel/services.html +20 -0
- data/Framework7-0.9.6/examples/tab-bar/about.html +19 -0
- data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +34 -0
- data/Framework7-0.9.6/examples/tab-bar/index.html +238 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +15 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +189 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +15 -0
- data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +35 -0
- data/Framework7-0.9.6/examples/tab-bar/services.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/about.html +22 -0
- data/Framework7-0.9.6/kitchen-sink/accordion.html +171 -0
- data/Framework7-0.9.6/kitchen-sink/color-themes.html +42 -0
- data/Framework7-0.9.6/kitchen-sink/contacts.html +190 -0
- data/Framework7-0.9.6/kitchen-sink/core-features.html +70 -0
- data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +233 -0
- data/Framework7-0.9.6/kitchen-sink/deep-2.html +22 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +18 -0
- data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +64 -0
- data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +200 -0
- data/Framework7-0.9.6/kitchen-sink/forms-elements.html +359 -0
- data/Framework7-0.9.6/kitchen-sink/forms-selects.html +72 -0
- data/Framework7-0.9.6/kitchen-sink/forms-storage.html +181 -0
- data/Framework7-0.9.6/kitchen-sink/forms.html +56 -0
- data/Framework7-0.9.6/kitchen-sink/grid.html +140 -0
- data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +42 -0
- 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 +466 -0
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +19 -0
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +119 -0
- data/Framework7-0.9.6/kitchen-sink/jade/about.jade +19 -0
- data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +133 -0
- data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +37 -0
- data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +115 -0
- data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +74 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +71 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +152 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +239 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +60 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +134 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +52 -0
- data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +110 -0
- data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +38 -0
- data/Framework7-0.9.6/kitchen-sink/jade/index.jade +427 -0
- data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +20 -0
- data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +266 -0
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +22 -0
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +20 -0
- data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +170 -0
- data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +71 -0
- data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +36 -0
- data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +43 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +7 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +7 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +17 -0
- data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +23 -0
- data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +21 -0
- data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +36 -0
- data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +21 -0
- data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +31 -0
- data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +44 -0
- data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +146 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +23 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +48 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +26 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +57 -0
- data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +107 -0
- data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +195 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +54 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +50 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +34 -0
- data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +27 -0
- data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +442 -0
- data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +245 -0
- data/Framework7-0.9.6/kitchen-sink/list-view.html +318 -0
- data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +36 -0
- data/Framework7-0.9.6/kitchen-sink/login-screen.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/media-lists.html +173 -0
- data/Framework7-0.9.6/kitchen-sink/messages.html +84 -0
- data/Framework7-0.9.6/kitchen-sink/modals.html +33 -0
- data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +46 -0
- data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +11 -0
- data/Framework7-0.9.6/kitchen-sink/no-navbar.html +11 -0
- data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +18 -0
- data/Framework7-0.9.6/kitchen-sink/notifications.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/panel-right2.html +16 -0
- data/Framework7-0.9.6/kitchen-sink/panel-right3.html +16 -0
- data/Framework7-0.9.6/kitchen-sink/panels.html +23 -0
- data/Framework7-0.9.6/kitchen-sink/photo-browser.html +36 -0
- data/Framework7-0.9.6/kitchen-sink/popover.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/preloader.html +28 -0
- data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +52 -0
- data/Framework7-0.9.6/kitchen-sink/searchbar.html +233 -0
- data/Framework7-0.9.6/kitchen-sink/slider-custom.html +28 -0
- data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +89 -0
- data/Framework7-0.9.6/kitchen-sink/slider-nested.html +32 -0
- data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider.html +54 -0
- data/Framework7-0.9.6/kitchen-sink/sortable-list.html +137 -0
- data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +216 -0
- data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +51 -0
- data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +109 -0
- data/Rakefile +2 -0
- data/framework7rails.gemspec +23 -0
- data/install_local.sh +2 -0
- data/lib/framework7rails/version.rb +4 -0
- data/lib/framework7rails.rb +8 -0
- data/update_from_vendor.rb +40 -0
- data/vendor/assets/images/i-f7.png +0 -0
- data/vendor/assets/images/i-form-calendar.png +0 -0
- data/vendor/assets/images/i-form-comment.png +0 -0
- data/vendor/assets/images/i-form-email.png +0 -0
- data/vendor/assets/images/i-form-gender.png +0 -0
- data/vendor/assets/images/i-form-name.png +0 -0
- data/vendor/assets/images/i-form-password.png +0 -0
- data/vendor/assets/images/i-form-settings.png +0 -0
- data/vendor/assets/images/i-form-tel.png +0 -0
- data/vendor/assets/images/i-form-toggle.png +0 -0
- data/vendor/assets/images/i-form-url.png +0 -0
- data/vendor/assets/javascripts/framework7.js +8288 -0
- data/vendor/assets/javascripts/framework7.js.map +1 -0
- data/vendor/assets/stylesheets/framework7.css +5078 -0
- data/vendor/assets/stylesheets/framework7.themes.css +279 -0
- metadata +231 -3
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
|
|
6
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
7
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
8
|
+
<title>My App</title>
|
|
9
|
+
<!-- Path to Framework7 Library CSS-->
|
|
10
|
+
<link rel="stylesheet" href="../../dist/css/framework7.min.css">
|
|
11
|
+
<!-- Path to your custom app styles-->
|
|
12
|
+
<link rel="stylesheet" href="css/my-app.css">
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<!-- Status bar overlay for fullscreen mode-->
|
|
16
|
+
<div class="statusbar-overlay"></div>
|
|
17
|
+
<!-- Panels overlay-->
|
|
18
|
+
<div class="panel-overlay"></div>
|
|
19
|
+
<!-- Left panel with reveal effect-->
|
|
20
|
+
<div class="panel panel-left panel-reveal">
|
|
21
|
+
<div class="content-block">
|
|
22
|
+
<p>Left panel content goes here</p>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<!-- Right panel with cover effect-->
|
|
26
|
+
<div class="panel panel-right panel-cover">
|
|
27
|
+
<div class="content-block">
|
|
28
|
+
<p>Right panel content goes here</p>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<!-- Views-->
|
|
32
|
+
<div class="views">
|
|
33
|
+
<!-- Left view-->
|
|
34
|
+
<div class="view view-left navbar-through">
|
|
35
|
+
<div class="navbar">
|
|
36
|
+
<div class="navbar-inner">
|
|
37
|
+
<div class="center sliding">Left View</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="pages">
|
|
41
|
+
<div data-page="index-left" class="page">
|
|
42
|
+
<div class="page-content">
|
|
43
|
+
<div class="content-block-title">Left View Links</div>
|
|
44
|
+
<div class="list-block">
|
|
45
|
+
<ul>
|
|
46
|
+
<li><a href="left-page-1.html" class="item-link">
|
|
47
|
+
<div class="item-content">
|
|
48
|
+
<div class="item-inner">
|
|
49
|
+
<div class="item-title">Left Page 1</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div></a></li>
|
|
52
|
+
<li><a href="left-page-2.html" class="item-link">
|
|
53
|
+
<div class="item-content">
|
|
54
|
+
<div class="item-inner">
|
|
55
|
+
<div class="item-title">Left Page 2</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div></a></li>
|
|
58
|
+
</ul>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="content-block-title">Control Main View</div>
|
|
61
|
+
<div class="list-block">
|
|
62
|
+
<ul>
|
|
63
|
+
<li><a href="about.html" data-view=".view-main" class="item-link">
|
|
64
|
+
<div class="item-content">
|
|
65
|
+
<div class="item-inner">
|
|
66
|
+
<div class="item-title">About</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div></a></li>
|
|
69
|
+
<li><a href="services.html" data-view=".view-main" class="item-link">
|
|
70
|
+
<div class="item-content">
|
|
71
|
+
<div class="item-inner">
|
|
72
|
+
<div class="item-title">Services</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div></a></li>
|
|
75
|
+
<li><a href="#" data-view=".view-main" class="back item-link">
|
|
76
|
+
<div class="item-content">
|
|
77
|
+
<div class="item-inner">
|
|
78
|
+
<div class="item-title">Back in history</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div></a></li>
|
|
81
|
+
</ul>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<!-- Right view, it is main view-->
|
|
88
|
+
<div class="view view-main navbar-through">
|
|
89
|
+
<div class="navbar">
|
|
90
|
+
<div class="navbar-inner">
|
|
91
|
+
<div class="center sliding">Main View</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<!-- Pages-->
|
|
95
|
+
<div class="pages">
|
|
96
|
+
<!-- Page, data-page contains page name-->
|
|
97
|
+
<div data-page="index-1" class="page">
|
|
98
|
+
<!-- Scrollable page content-->
|
|
99
|
+
<div class="page-content">
|
|
100
|
+
<div class="content-block-title">Hello</div>
|
|
101
|
+
<div class="content-block">
|
|
102
|
+
<div class="content-block-inner">
|
|
103
|
+
<p>This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.</p>
|
|
104
|
+
<p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
|
|
105
|
+
<p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
|
|
106
|
+
<p>And of course, your favorite panels are still here: <a href="#" class="open-panel">left</a> and <a href="#" data-panel="right" class="open-panel">right</a></p>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="list-block">
|
|
110
|
+
<ul>
|
|
111
|
+
<li><a href="about.html" class="item-link">
|
|
112
|
+
<div class="item-content">
|
|
113
|
+
<div class="item-inner">
|
|
114
|
+
<div class="item-title">About</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div></a></li>
|
|
117
|
+
<li><a href="services.html" class="item-link">
|
|
118
|
+
<div class="item-content">
|
|
119
|
+
<div class="item-inner">
|
|
120
|
+
<div class="item-title">Services</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div></a></li>
|
|
123
|
+
</ul>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
<!-- Path to Framework7 Library JS-->
|
|
131
|
+
<script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
|
|
132
|
+
<!-- Path to your app js-->
|
|
133
|
+
<script type="text/javascript" src="js/my-app.js"></script>
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.navbar
|
|
2
|
+
.navbar-inner
|
|
3
|
+
.left
|
|
4
|
+
a(href="#").back.link
|
|
5
|
+
i.icon.icon-back
|
|
6
|
+
span Back
|
|
7
|
+
.center.sliding About Us
|
|
8
|
+
.pages
|
|
9
|
+
.page(data-page="about")
|
|
10
|
+
.page-content
|
|
11
|
+
.content-block
|
|
12
|
+
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
|
13
|
+
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
|
14
|
+
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
|
15
|
+
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
doctype
|
|
2
|
+
html
|
|
3
|
+
head
|
|
4
|
+
meta(charset="utf-8")
|
|
5
|
+
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
|
|
6
|
+
meta(name='apple-mobile-web-app-capable', content='yes')
|
|
7
|
+
meta(name="apple-mobile-web-app-status-bar-style", content="black")
|
|
8
|
+
title My App
|
|
9
|
+
// Path to Framework7 Library CSS
|
|
10
|
+
link(rel="stylesheet", href="../../dist/css/framework7.min.css")
|
|
11
|
+
// Path to your custom app styles
|
|
12
|
+
link(rel="stylesheet", href="css/my-app.css")
|
|
13
|
+
body
|
|
14
|
+
// Status bar overlay for fullscreen mode
|
|
15
|
+
.statusbar-overlay
|
|
16
|
+
|
|
17
|
+
// Panels overlay
|
|
18
|
+
.panel-overlay
|
|
19
|
+
// Left panel with reveal effect
|
|
20
|
+
.panel.panel-left.panel-reveal
|
|
21
|
+
.content-block
|
|
22
|
+
p Left panel content goes here
|
|
23
|
+
// Right panel with cover effect
|
|
24
|
+
.panel.panel-right.panel-cover
|
|
25
|
+
.content-block
|
|
26
|
+
p Right panel content goes here
|
|
27
|
+
|
|
28
|
+
// Views
|
|
29
|
+
.views
|
|
30
|
+
// Left view
|
|
31
|
+
.view.view-left.navbar-through
|
|
32
|
+
.navbar
|
|
33
|
+
.navbar-inner
|
|
34
|
+
.center.sliding Left View
|
|
35
|
+
.pages
|
|
36
|
+
.page(data-page="index-left")
|
|
37
|
+
.page-content
|
|
38
|
+
.content-block-title Left View Links
|
|
39
|
+
.list-block
|
|
40
|
+
ul
|
|
41
|
+
li
|
|
42
|
+
a(href="left-page-1.html").item-link
|
|
43
|
+
.item-content
|
|
44
|
+
.item-inner
|
|
45
|
+
.item-title Left Page 1
|
|
46
|
+
li
|
|
47
|
+
a(href="left-page-2.html").item-link
|
|
48
|
+
.item-content
|
|
49
|
+
.item-inner
|
|
50
|
+
.item-title Left Page 2
|
|
51
|
+
|
|
52
|
+
.content-block-title Control Main View
|
|
53
|
+
.list-block
|
|
54
|
+
ul
|
|
55
|
+
li
|
|
56
|
+
a(href="about.html", data-view=".view-main").item-link
|
|
57
|
+
.item-content
|
|
58
|
+
.item-inner
|
|
59
|
+
.item-title About
|
|
60
|
+
li
|
|
61
|
+
a(href="services.html", data-view=".view-main").item-link
|
|
62
|
+
.item-content
|
|
63
|
+
.item-inner
|
|
64
|
+
.item-title Services
|
|
65
|
+
li
|
|
66
|
+
a(href="#", data-view=".view-main").back.item-link
|
|
67
|
+
.item-content
|
|
68
|
+
.item-inner
|
|
69
|
+
.item-title Back in history
|
|
70
|
+
// Right view, it is main view
|
|
71
|
+
.view.view-main.navbar-through
|
|
72
|
+
.navbar
|
|
73
|
+
.navbar-inner
|
|
74
|
+
.center.sliding Main View
|
|
75
|
+
// Pages
|
|
76
|
+
.pages
|
|
77
|
+
// Page, data-page contains page name
|
|
78
|
+
.page(data-page="index-1")
|
|
79
|
+
// Scrollable page content
|
|
80
|
+
.page-content
|
|
81
|
+
.content-block-title Hello
|
|
82
|
+
.content-block
|
|
83
|
+
.content-block-inner
|
|
84
|
+
p This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.
|
|
85
|
+
p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.
|
|
86
|
+
p The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
|
|
87
|
+
p And of course, your favorite panels are still here:
|
|
88
|
+
a(href="#").open-panel left
|
|
89
|
+
| and
|
|
90
|
+
a(href="#", data-panel="right").open-panel right
|
|
91
|
+
.list-block
|
|
92
|
+
ul
|
|
93
|
+
li
|
|
94
|
+
a(href="about.html").item-link
|
|
95
|
+
.item-content
|
|
96
|
+
.item-inner
|
|
97
|
+
.item-title About
|
|
98
|
+
li
|
|
99
|
+
a(href="services.html").item-link
|
|
100
|
+
.item-content
|
|
101
|
+
.item-inner
|
|
102
|
+
.item-title Services
|
|
103
|
+
|
|
104
|
+
// Path to Framework7 Library JS
|
|
105
|
+
script(type="text/javascript", src="../../dist/js/framework7.min.js")
|
|
106
|
+
// Path to your app js
|
|
107
|
+
script(type="text/javascript", src="js/my-app.js")
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.navbar
|
|
2
|
+
.navbar-inner
|
|
3
|
+
.left
|
|
4
|
+
a(href="#").back.link
|
|
5
|
+
i.icon.icon-back
|
|
6
|
+
span Back
|
|
7
|
+
.center.sliding Left Page 1
|
|
8
|
+
.pages
|
|
9
|
+
.page(data-page="left-page-1")
|
|
10
|
+
.page-content
|
|
11
|
+
.content-block
|
|
12
|
+
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
|
13
|
+
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
|
14
|
+
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
|
15
|
+
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.navbar
|
|
2
|
+
.navbar-inner
|
|
3
|
+
.left
|
|
4
|
+
a(href="#").back.link
|
|
5
|
+
i.icon.icon-back
|
|
6
|
+
span Back
|
|
7
|
+
.center.sliding Left Page 2
|
|
8
|
+
.pages
|
|
9
|
+
.page(data-page="left-page-2")
|
|
10
|
+
.page-content
|
|
11
|
+
.content-block
|
|
12
|
+
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
|
13
|
+
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
|
14
|
+
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
|
15
|
+
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.navbar
|
|
2
|
+
.navbar-inner
|
|
3
|
+
.left
|
|
4
|
+
a(href="#").back.link
|
|
5
|
+
i.icon.icon-back
|
|
6
|
+
span Back
|
|
7
|
+
.center.sliding Services
|
|
8
|
+
.pages
|
|
9
|
+
.page(data-page="services")
|
|
10
|
+
.page-content
|
|
11
|
+
.content-block
|
|
12
|
+
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
|
13
|
+
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
|
14
|
+
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
|
15
|
+
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Initialize your app
|
|
2
|
+
var myApp = new Framework7();
|
|
3
|
+
|
|
4
|
+
// Export selectors engine
|
|
5
|
+
var $$ = Dom7;
|
|
6
|
+
|
|
7
|
+
// Add views
|
|
8
|
+
var leftView = myApp.addView('.view-left', {
|
|
9
|
+
// Because we use fixed-through navbar we can enable dynamic navbar
|
|
10
|
+
dynamicNavbar: true
|
|
11
|
+
});
|
|
12
|
+
var mainView = myApp.addView('.view-main', {
|
|
13
|
+
// Because we use fixed-through navbar we can enable dynamic navbar
|
|
14
|
+
dynamicNavbar: true
|
|
15
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
|
|
5
|
+
<div class="center sliding">Left Page 1</div>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="pages">
|
|
9
|
+
<div data-page="left-page-1" class="page">
|
|
10
|
+
<div class="page-content">
|
|
11
|
+
<div class="content-block">
|
|
12
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
|
|
13
|
+
<p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
|
|
14
|
+
<p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
|
|
15
|
+
<p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
|
|
5
|
+
<div class="center sliding">Left Page 2</div>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="pages">
|
|
9
|
+
<div data-page="left-page-2" class="page">
|
|
10
|
+
<div class="page-content">
|
|
11
|
+
<div class="content-block">
|
|
12
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
|
|
13
|
+
<p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
|
|
14
|
+
<p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
|
|
15
|
+
<p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* Your app custom files in this file */
|
|
2
|
+
.view-left {
|
|
3
|
+
float: left;
|
|
4
|
+
width: 320px;
|
|
5
|
+
border-right: 1px solid #b2b2b2;
|
|
6
|
+
}
|
|
7
|
+
.view-main {
|
|
8
|
+
width: ~"-webkit-calc(100% - 321px)";
|
|
9
|
+
width: ~"-moz-calc(100% - 321px)";
|
|
10
|
+
width: ~"-ms-calc(100% - 321px)";
|
|
11
|
+
width: ~"calc(100% - 321px)";
|
|
12
|
+
}
|
|
13
|
+
@media (max-width:768px) {
|
|
14
|
+
.view-left {
|
|
15
|
+
width: 240px;
|
|
16
|
+
}
|
|
17
|
+
.view-main {
|
|
18
|
+
width: ~"-webkit-calc(100% - 241px)";
|
|
19
|
+
width: ~"-moz-calc(100% - 241px)";
|
|
20
|
+
width: ~"-ms-calc(100% - 241px)";
|
|
21
|
+
width: ~"calc(100% - 241px)";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
|
|
5
|
+
<div class="center sliding">Services</div>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="pages">
|
|
9
|
+
<div data-page="services" class="page">
|
|
10
|
+
<div class="page-content">
|
|
11
|
+
<div class="content-block">
|
|
12
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
|
|
13
|
+
<p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
|
|
14
|
+
<p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
|
|
15
|
+
<p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
|
|
5
|
+
<div class="center sliding">About Us</div>
|
|
6
|
+
<div class="right"><a href="#" data-panel="left" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="pages">
|
|
10
|
+
<div data-page="about" class="page">
|
|
11
|
+
<div class="page-content">
|
|
12
|
+
<div class="content-block">
|
|
13
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
|
|
14
|
+
<p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
|
|
15
|
+
<p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
|
|
16
|
+
<p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/* Your app custom files in this file */
|
|
2
|
+
.view-left {
|
|
3
|
+
border-right: 1px solid #b2b2b2;
|
|
4
|
+
}
|
|
5
|
+
/* This will fix flicker navbar in left panel view */
|
|
6
|
+
.panel-left .page-content {
|
|
7
|
+
padding: 0;
|
|
8
|
+
}
|
|
9
|
+
.panel-left .page {
|
|
10
|
+
margin-top: 44px;
|
|
11
|
+
padding-bottom: 44px;
|
|
12
|
+
}
|
|
13
|
+
.panel-left .navbar {
|
|
14
|
+
position: relative;
|
|
15
|
+
margin-bottom: -44px;
|
|
16
|
+
}
|
|
17
|
+
/* Because we have panels-overlay inside of .views we need to fix its open position for right panel */
|
|
18
|
+
body.with-panel-right-reveal .panel-overlay {
|
|
19
|
+
margin-left: 0;
|
|
20
|
+
}
|
|
21
|
+
/* iPad Vertical */
|
|
22
|
+
@media (min-width: 569px) {
|
|
23
|
+
.panel.panel-left.panel-cover {
|
|
24
|
+
width: 320px;
|
|
25
|
+
left: -320px;
|
|
26
|
+
}
|
|
27
|
+
body.with-panel-left-cover .panel-left {
|
|
28
|
+
-webkit-transform: translate3d(320px, 0, 0);
|
|
29
|
+
-ms-transform: translate3d(320px, 0, 0);
|
|
30
|
+
transform: translate3d(320px, 0, 0);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
/* iPad Horizontal */
|
|
34
|
+
@media (min-width: 769px) {
|
|
35
|
+
body .panel.panel-left.panel-cover {
|
|
36
|
+
left: 0;
|
|
37
|
+
width: 320px;
|
|
38
|
+
display: block;
|
|
39
|
+
}
|
|
40
|
+
body.with-panel-left-cover .panel-left {
|
|
41
|
+
-webkit-transform: translate3d(0px, 0, 0);
|
|
42
|
+
-ms-transform: translate3d(0px, 0, 0);
|
|
43
|
+
transform: translate3d(0px, 0, 0);
|
|
44
|
+
}
|
|
45
|
+
.view-main {
|
|
46
|
+
float: right;
|
|
47
|
+
width: -webkit-calc(100% - 320px);
|
|
48
|
+
width: -moz-calc(100% - 320px);
|
|
49
|
+
width: -ms-calc(100% - 320px);
|
|
50
|
+
width: calc(100% - 320px);
|
|
51
|
+
}
|
|
52
|
+
/* Let's hide panel-opener when left panel is visible */
|
|
53
|
+
.view-main .navbar .open-panel {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
|
|
6
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
7
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
8
|
+
<title>My App</title>
|
|
9
|
+
<!-- Path to Framework7 Library CSS-->
|
|
10
|
+
<link rel="stylesheet" href="../../dist/css/framework7.min.css">
|
|
11
|
+
<!-- Path to your custom app styles-->
|
|
12
|
+
<link rel="stylesheet" href="css/my-app.css">
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<!-- Status bar overlay for fullscreen mode-->
|
|
16
|
+
<div class="statusbar-overlay"></div>
|
|
17
|
+
<!-- Right panel with cover effect-->
|
|
18
|
+
<div class="panel panel-right panel-reveal">
|
|
19
|
+
<div class="content-block">
|
|
20
|
+
<p>Right panel content goes here</p>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<!-- Views-->
|
|
24
|
+
<div class="views">
|
|
25
|
+
<!-- Put panels-overlay and left-panel with view inside of views-->
|
|
26
|
+
<!-- Panels overlay-->
|
|
27
|
+
<div class="panel-overlay"></div>
|
|
28
|
+
<!-- Left panel with reveal effect-->
|
|
29
|
+
<div class="panel panel-left panel-cover">
|
|
30
|
+
<!-- Left view-->
|
|
31
|
+
<div class="view view-left navbar-through">
|
|
32
|
+
<div class="navbar">
|
|
33
|
+
<div class="navbar-inner">
|
|
34
|
+
<div class="left"></div>
|
|
35
|
+
<div class="center sliding">Left View</div>
|
|
36
|
+
<div class="right"></div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="pages">
|
|
40
|
+
<div data-page="index-left" class="page">
|
|
41
|
+
<div class="page-content">
|
|
42
|
+
<div class="content-block-title">Left View Links</div>
|
|
43
|
+
<div class="list-block">
|
|
44
|
+
<ul>
|
|
45
|
+
<li><a href="left-page-1.html" class="item-link">
|
|
46
|
+
<div class="item-content">
|
|
47
|
+
<div class="item-inner">
|
|
48
|
+
<div class="item-title">Left Page 1</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div></a></li>
|
|
51
|
+
<li><a href="left-page-2.html" class="item-link">
|
|
52
|
+
<div class="item-content">
|
|
53
|
+
<div class="item-inner">
|
|
54
|
+
<div class="item-title">Left Page 2</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div></a></li>
|
|
57
|
+
</ul>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="content-block-title">Control Main View</div>
|
|
60
|
+
<div class="list-block">
|
|
61
|
+
<ul>
|
|
62
|
+
<li><a href="about.html" data-view=".view-main" class="item-link close-panel">
|
|
63
|
+
<div class="item-content">
|
|
64
|
+
<div class="item-inner">
|
|
65
|
+
<div class="item-title">About</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div></a></li>
|
|
68
|
+
<li><a href="services.html" data-view=".view-main" class="item-link close-panel">
|
|
69
|
+
<div class="item-content">
|
|
70
|
+
<div class="item-inner">
|
|
71
|
+
<div class="item-title">Services</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div></a></li>
|
|
74
|
+
<li><a href="#" data-view=".view-main" class="back item-link close-panel">
|
|
75
|
+
<div class="item-content">
|
|
76
|
+
<div class="item-inner">
|
|
77
|
+
<div class="item-title">Back in history</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div></a></li>
|
|
80
|
+
</ul>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<!-- Right view, it is main view-->
|
|
88
|
+
<div class="view view-main navbar-through">
|
|
89
|
+
<div class="navbar">
|
|
90
|
+
<div class="navbar-inner">
|
|
91
|
+
<div class="center sliding">Main View</div>
|
|
92
|
+
<div class="right"><a href="#" data-panel="left" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<!-- Pages-->
|
|
96
|
+
<div class="pages">
|
|
97
|
+
<!-- Page, data-page contains page name-->
|
|
98
|
+
<div data-page="index-1" class="page">
|
|
99
|
+
<!-- Scrollable page content-->
|
|
100
|
+
<div class="page-content">
|
|
101
|
+
<div class="content-block-title">Hello</div>
|
|
102
|
+
<div class="content-block">
|
|
103
|
+
<div class="content-block-inner">
|
|
104
|
+
<p>This is an example of split view application layout where left view degrades to panel on narrow screens (iPad portrait and iPhone). It behaves like default Mail app on iOS 7.</p>
|
|
105
|
+
<p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar. You can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
|
|
106
|
+
<p>Additional right panel is also available: <a href="#" data-panel="right" class="open-panel">right panel</a></p>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="list-block">
|
|
110
|
+
<ul>
|
|
111
|
+
<li><a href="about.html" class="item-link">
|
|
112
|
+
<div class="item-content">
|
|
113
|
+
<div class="item-inner">
|
|
114
|
+
<div class="item-title">About</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div></a></li>
|
|
117
|
+
<li><a href="services.html" class="item-link">
|
|
118
|
+
<div class="item-content">
|
|
119
|
+
<div class="item-inner">
|
|
120
|
+
<div class="item-title">Services</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div></a></li>
|
|
123
|
+
</ul>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
<!-- Path to Framework7 Library JS-->
|
|
131
|
+
<script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
|
|
132
|
+
<!-- Path to your app js-->
|
|
133
|
+
<script type="text/javascript" src="js/my-app.js"></script>
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|