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,200 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left sliding"><a href="forms.html" class="back link"><i class="icon icon-back"></i><span>Forms</span></a></div>
|
|
5
|
+
<div class="center sliding">Checkboxes And Radios</div>
|
|
6
|
+
<div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="pages navbar-through">
|
|
10
|
+
<div data-page="forms-checkboxes" class="page">
|
|
11
|
+
<div class="page-content">
|
|
12
|
+
<div class="content-block-title">Checkbox group</div>
|
|
13
|
+
<div class="list-block">
|
|
14
|
+
<ul>
|
|
15
|
+
<li>
|
|
16
|
+
<label class="label-checkbox item-content">
|
|
17
|
+
<input type="checkbox" name="ks-checkbox" value="Books" checked="checked"/>
|
|
18
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
19
|
+
<div class="item-inner">
|
|
20
|
+
<div class="item-title">Books</div>
|
|
21
|
+
</div>
|
|
22
|
+
</label>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<label class="label-checkbox item-content">
|
|
26
|
+
<input type="checkbox" name="ks-checkbox" value="Movies"/>
|
|
27
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
28
|
+
<div class="item-inner">
|
|
29
|
+
<div class="item-title">Movies</div>
|
|
30
|
+
</div>
|
|
31
|
+
</label>
|
|
32
|
+
</li>
|
|
33
|
+
<li>
|
|
34
|
+
<label class="label-checkbox item-content">
|
|
35
|
+
<input type="checkbox" name="ks-checkbox" value="Food"/>
|
|
36
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
37
|
+
<div class="item-inner">
|
|
38
|
+
<div class="item-title">Food</div>
|
|
39
|
+
</div>
|
|
40
|
+
</label>
|
|
41
|
+
</li>
|
|
42
|
+
<li>
|
|
43
|
+
<label class="label-checkbox item-content">
|
|
44
|
+
<input type="checkbox" name="ks-checkbox" value="Drinks"/>
|
|
45
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
46
|
+
<div class="item-inner">
|
|
47
|
+
<div class="item-title">Drinks</div>
|
|
48
|
+
</div>
|
|
49
|
+
</label>
|
|
50
|
+
</li>
|
|
51
|
+
</ul>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="content-block-title">Radio buttons group</div>
|
|
54
|
+
<div class="list-block">
|
|
55
|
+
<ul>
|
|
56
|
+
<li>
|
|
57
|
+
<label class="label-radio item-content">
|
|
58
|
+
<input type="radio" name="ks-radio" value="Books" checked="checked"/>
|
|
59
|
+
<div class="item-inner">
|
|
60
|
+
<div class="item-title">Books</div>
|
|
61
|
+
</div>
|
|
62
|
+
</label>
|
|
63
|
+
</li>
|
|
64
|
+
<li>
|
|
65
|
+
<label class="label-radio item-content">
|
|
66
|
+
<input type="radio" name="ks-radio" value="Movies"/>
|
|
67
|
+
<div class="item-inner">
|
|
68
|
+
<div class="item-title">Movies</div>
|
|
69
|
+
</div>
|
|
70
|
+
</label>
|
|
71
|
+
</li>
|
|
72
|
+
<li>
|
|
73
|
+
<label class="label-radio item-content">
|
|
74
|
+
<input type="radio" name="ks-radio" value="Food"/>
|
|
75
|
+
<div class="item-inner">
|
|
76
|
+
<div class="item-title">Food</div>
|
|
77
|
+
</div>
|
|
78
|
+
</label>
|
|
79
|
+
</li>
|
|
80
|
+
<li>
|
|
81
|
+
<label class="label-radio item-content">
|
|
82
|
+
<input type="radio" name="ks-radio" value="Drinks"/>
|
|
83
|
+
<div class="item-inner">
|
|
84
|
+
<div class="item-title">Drinks</div>
|
|
85
|
+
</div>
|
|
86
|
+
</label>
|
|
87
|
+
</li>
|
|
88
|
+
</ul>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="content-block-title">With Media Lists</div>
|
|
91
|
+
<div class="list-block media-list">
|
|
92
|
+
<ul>
|
|
93
|
+
<li>
|
|
94
|
+
<label class="label-checkbox item-content">
|
|
95
|
+
<input type="checkbox" name="ks-media-checkbox" value="1"/>
|
|
96
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
97
|
+
<div class="item-inner">
|
|
98
|
+
<div class="item-title-row">
|
|
99
|
+
<div class="item-title">Facebook</div>
|
|
100
|
+
<div class="item-after">17:14</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="item-subtitle">New messages from John Doe</div>
|
|
103
|
+
<div class="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.</div>
|
|
104
|
+
</div>
|
|
105
|
+
</label>
|
|
106
|
+
</li>
|
|
107
|
+
<li>
|
|
108
|
+
<label class="label-checkbox item-content">
|
|
109
|
+
<input type="checkbox" name="ks-media-checkbox" value="2"/>
|
|
110
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
111
|
+
<div class="item-inner">
|
|
112
|
+
<div class="item-title-row">
|
|
113
|
+
<div class="item-title">John Doe (via Twitter)</div>
|
|
114
|
+
<div class="item-after">17:11</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
|
|
117
|
+
<div class="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.</div>
|
|
118
|
+
</div>
|
|
119
|
+
</label>
|
|
120
|
+
</li>
|
|
121
|
+
<li>
|
|
122
|
+
<label class="label-checkbox item-content">
|
|
123
|
+
<input type="checkbox" name="ks-media-checkbox" value="3"/>
|
|
124
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
125
|
+
<div class="item-inner">
|
|
126
|
+
<div class="item-title-row">
|
|
127
|
+
<div class="item-title">Facebook</div>
|
|
128
|
+
<div class="item-after">16:48</div>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="item-subtitle">New messages from John Doe</div>
|
|
131
|
+
<div class="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.</div>
|
|
132
|
+
</div>
|
|
133
|
+
</label>
|
|
134
|
+
</li>
|
|
135
|
+
<li>
|
|
136
|
+
<label class="label-checkbox item-content">
|
|
137
|
+
<input type="checkbox" name="ks-media-checkbox" value="4"/>
|
|
138
|
+
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
|
139
|
+
<div class="item-inner">
|
|
140
|
+
<div class="item-title-row">
|
|
141
|
+
<div class="item-title">John Doe (via Twitter)</div>
|
|
142
|
+
<div class="item-after">15:32</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
|
|
145
|
+
<div class="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.</div>
|
|
146
|
+
</div>
|
|
147
|
+
</label>
|
|
148
|
+
</li>
|
|
149
|
+
</ul>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="content-block-title">What is your favourite song?</div>
|
|
152
|
+
<div class="list-block media-list">
|
|
153
|
+
<ul>
|
|
154
|
+
<li>
|
|
155
|
+
<label class="label-radio item-content">
|
|
156
|
+
<input type="radio" name="ks-media-radio" value="1" checked="checked"/>
|
|
157
|
+
<div class="item-media"><img src="http://hhhhold.com/160/d/jpg?1" width="80"/></div>
|
|
158
|
+
<div class="item-inner">
|
|
159
|
+
<div class="item-title-row">
|
|
160
|
+
<div class="item-title">Yellow Submarine</div>
|
|
161
|
+
<div class="item-after">$15</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="item-subtitle">Beatles</div>
|
|
164
|
+
<div class="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.</div>
|
|
165
|
+
</div>
|
|
166
|
+
</label>
|
|
167
|
+
</li>
|
|
168
|
+
<li>
|
|
169
|
+
<label class="label-radio item-content">
|
|
170
|
+
<input type="radio" name="ks-media-radio" value="2"/>
|
|
171
|
+
<div class="item-media"><img src="http://hhhhold.com/160/d/jpg?2" width="80"/></div>
|
|
172
|
+
<div class="item-inner">
|
|
173
|
+
<div class="item-title-row">
|
|
174
|
+
<div class="item-title">Don't Stop Me Now</div>
|
|
175
|
+
<div class="item-after">$22</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="item-subtitle">Queen</div>
|
|
178
|
+
<div class="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.</div>
|
|
179
|
+
</div>
|
|
180
|
+
</label>
|
|
181
|
+
</li>
|
|
182
|
+
<li>
|
|
183
|
+
<label class="label-radio item-content">
|
|
184
|
+
<input type="radio" name="ks-media-radio" value="3"/>
|
|
185
|
+
<div class="item-media"><img src="http://hhhhold.com/160/d/jpg?3" width="80"/></div>
|
|
186
|
+
<div class="item-inner">
|
|
187
|
+
<div class="item-title-row">
|
|
188
|
+
<div class="item-title">Billie Jean</div>
|
|
189
|
+
<div class="item-after">$16</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="item-subtitle">Michael Jackson</div>
|
|
192
|
+
<div class="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.</div>
|
|
193
|
+
</div>
|
|
194
|
+
</label>
|
|
195
|
+
</li>
|
|
196
|
+
</ul>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left sliding"><a href="forms.html" class="back link"><i class="icon icon-back"></i><span>Forms</span></a></div>
|
|
5
|
+
<div class="center sliding">Form Elements</div>
|
|
6
|
+
<div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="pages navbar-through">
|
|
10
|
+
<div data-page="form-elements" class="page">
|
|
11
|
+
<div class="page-content">
|
|
12
|
+
<div class="content-block-title">Full Layout</div>
|
|
13
|
+
<div class="list-block">
|
|
14
|
+
<ul>
|
|
15
|
+
<li>
|
|
16
|
+
<div class="item-content">
|
|
17
|
+
<div class="item-media"><i class="icon icon-form-name"></i></div>
|
|
18
|
+
<div class="item-inner">
|
|
19
|
+
<div class="item-title label">Name</div>
|
|
20
|
+
<div class="item-input">
|
|
21
|
+
<input type="text" placeholder="Your name"/>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</li>
|
|
26
|
+
<li>
|
|
27
|
+
<div class="item-content">
|
|
28
|
+
<div class="item-media"><i class="icon icon-form-email"></i></div>
|
|
29
|
+
<div class="item-inner">
|
|
30
|
+
<div class="item-title label">E-mail</div>
|
|
31
|
+
<div class="item-input">
|
|
32
|
+
<input type="email" placeholder="E-mail"/>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</li>
|
|
37
|
+
<li>
|
|
38
|
+
<div class="item-content">
|
|
39
|
+
<div class="item-media"><i class="icon icon-form-url"></i></div>
|
|
40
|
+
<div class="item-inner">
|
|
41
|
+
<div class="item-title label">URL</div>
|
|
42
|
+
<div class="item-input">
|
|
43
|
+
<input type="url" placeholder="URL"/>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</li>
|
|
48
|
+
<li>
|
|
49
|
+
<div class="item-content">
|
|
50
|
+
<div class="item-media"><i class="icon icon-form-password"></i></div>
|
|
51
|
+
<div class="item-inner">
|
|
52
|
+
<div class="item-title label">Password</div>
|
|
53
|
+
<div class="item-input">
|
|
54
|
+
<input type="password" placeholder="Password"/>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</li>
|
|
59
|
+
<li>
|
|
60
|
+
<div class="item-content">
|
|
61
|
+
<div class="item-media"><i class="icon icon-form-tel"></i></div>
|
|
62
|
+
<div class="item-inner">
|
|
63
|
+
<div class="item-title label">Phone</div>
|
|
64
|
+
<div class="item-input">
|
|
65
|
+
<input type="tel" placeholder="Phone"/>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<div class="item-content">
|
|
72
|
+
<div class="item-media"><i class="icon icon-form-gender"></i></div>
|
|
73
|
+
<div class="item-inner">
|
|
74
|
+
<div class="item-title label">Gender</div>
|
|
75
|
+
<div class="item-input">
|
|
76
|
+
<select>
|
|
77
|
+
<option>Male</option>
|
|
78
|
+
<option>Female</option>
|
|
79
|
+
</select>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</li>
|
|
84
|
+
<li>
|
|
85
|
+
<div class="item-content">
|
|
86
|
+
<div class="item-media"><i class="icon icon-form-calendar"></i></div>
|
|
87
|
+
<div class="item-inner">
|
|
88
|
+
<div class="item-title label">Birth date</div>
|
|
89
|
+
<div class="item-input">
|
|
90
|
+
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</li>
|
|
95
|
+
<li>
|
|
96
|
+
<div class="item-content">
|
|
97
|
+
<div class="item-media"><i class="icon icon-form-calendar"></i></div>
|
|
98
|
+
<div class="item-inner">
|
|
99
|
+
<div class="item-title label">Date time</div>
|
|
100
|
+
<div class="item-input">
|
|
101
|
+
<input type="datetime-local" placeholder="Birth day"/>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</li>
|
|
106
|
+
<li>
|
|
107
|
+
<div class="item-content">
|
|
108
|
+
<div class="item-media"><i class="icon icon-form-toggle"></i></div>
|
|
109
|
+
<div class="item-inner">
|
|
110
|
+
<div class="item-title label">Switch</div>
|
|
111
|
+
<div class="item-input">
|
|
112
|
+
<label class="label-switch">
|
|
113
|
+
<input type="checkbox"/>
|
|
114
|
+
<div class="checkbox"></div>
|
|
115
|
+
</label>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</li>
|
|
120
|
+
<li>
|
|
121
|
+
<div class="item-content">
|
|
122
|
+
<div class="item-media"><i class="icon icon-form-settings"></i></div>
|
|
123
|
+
<div class="item-inner">
|
|
124
|
+
<div class="item-title label">Slider</div>
|
|
125
|
+
<div class="item-input">
|
|
126
|
+
<div class="range-slider">
|
|
127
|
+
<input type="range" min="0" max="100" value="50" step="0.1"/>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="align-top">
|
|
134
|
+
<div class="item-content">
|
|
135
|
+
<div class="item-media"><i class="icon icon-form-comment"></i></div>
|
|
136
|
+
<div class="item-inner">
|
|
137
|
+
<div class="item-title label">Textarea</div>
|
|
138
|
+
<div class="item-input">
|
|
139
|
+
<textarea></textarea>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</li>
|
|
144
|
+
</ul>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="content-block-title">Icons and inputs</div>
|
|
147
|
+
<div class="list-block">
|
|
148
|
+
<ul>
|
|
149
|
+
<li>
|
|
150
|
+
<div class="item-content">
|
|
151
|
+
<div class="item-media"><i class="icon icon-form-name"></i></div>
|
|
152
|
+
<div class="item-inner">
|
|
153
|
+
<div class="item-input">
|
|
154
|
+
<input type="text" placeholder="Your name"/>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</li>
|
|
159
|
+
<li>
|
|
160
|
+
<div class="item-content">
|
|
161
|
+
<div class="item-media"><i class="icon icon-form-email"></i></div>
|
|
162
|
+
<div class="item-inner">
|
|
163
|
+
<div class="item-input">
|
|
164
|
+
<input type="email" placeholder="E-mail"/>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</li>
|
|
169
|
+
<li>
|
|
170
|
+
<div class="item-content">
|
|
171
|
+
<div class="item-media"><i class="icon icon-form-gender"></i></div>
|
|
172
|
+
<div class="item-inner">
|
|
173
|
+
<div class="item-input">
|
|
174
|
+
<select>
|
|
175
|
+
<option>Male</option>
|
|
176
|
+
<option>Female</option>
|
|
177
|
+
</select>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</li>
|
|
182
|
+
<li>
|
|
183
|
+
<div class="item-content">
|
|
184
|
+
<div class="item-media"><i class="icon icon-form-calendar"></i></div>
|
|
185
|
+
<div class="item-inner">
|
|
186
|
+
<div class="item-input">
|
|
187
|
+
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</li>
|
|
192
|
+
<li>
|
|
193
|
+
<div class="item-content">
|
|
194
|
+
<div class="item-media"><i class="icon icon-form-toggle"></i></div>
|
|
195
|
+
<div class="item-inner">
|
|
196
|
+
<div class="item-input">
|
|
197
|
+
<label class="label-switch">
|
|
198
|
+
<input type="checkbox"/>
|
|
199
|
+
<div class="checkbox"></div>
|
|
200
|
+
</label>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</li>
|
|
205
|
+
</ul>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="content-block-title">Labels and inputs</div>
|
|
208
|
+
<div class="list-block">
|
|
209
|
+
<ul>
|
|
210
|
+
<li>
|
|
211
|
+
<div class="item-content">
|
|
212
|
+
<div class="item-inner">
|
|
213
|
+
<div class="item-title label">Name</div>
|
|
214
|
+
<div class="item-input">
|
|
215
|
+
<input type="text" placeholder="Your name"/>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</li>
|
|
220
|
+
<li>
|
|
221
|
+
<div class="item-content">
|
|
222
|
+
<div class="item-inner">
|
|
223
|
+
<div class="item-title label">E-mail</div>
|
|
224
|
+
<div class="item-input">
|
|
225
|
+
<input type="email" placeholder="E-mail"/>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</li>
|
|
230
|
+
<li>
|
|
231
|
+
<div class="item-content">
|
|
232
|
+
<div class="item-inner">
|
|
233
|
+
<div class="item-title label">Gender</div>
|
|
234
|
+
<div class="item-input">
|
|
235
|
+
<select>
|
|
236
|
+
<option>Male</option>
|
|
237
|
+
<option>Female</option>
|
|
238
|
+
</select>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
</li>
|
|
243
|
+
<li>
|
|
244
|
+
<div class="item-content">
|
|
245
|
+
<div class="item-inner">
|
|
246
|
+
<div class="item-title label">Birth date</div>
|
|
247
|
+
<div class="item-input">
|
|
248
|
+
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</li>
|
|
253
|
+
<li>
|
|
254
|
+
<div class="item-content">
|
|
255
|
+
<div class="item-inner">
|
|
256
|
+
<div class="item-title label">Switch</div>
|
|
257
|
+
<div class="item-input">
|
|
258
|
+
<label class="label-switch">
|
|
259
|
+
<input type="checkbox"/>
|
|
260
|
+
<div class="checkbox"></div>
|
|
261
|
+
</label>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
</li>
|
|
266
|
+
</ul>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="content-block-title">Just inputs</div>
|
|
269
|
+
<div class="list-block">
|
|
270
|
+
<ul>
|
|
271
|
+
<li>
|
|
272
|
+
<div class="item-content">
|
|
273
|
+
<div class="item-inner">
|
|
274
|
+
<div class="item-input">
|
|
275
|
+
<input type="text" placeholder="Your name"/>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</li>
|
|
280
|
+
<li>
|
|
281
|
+
<div class="item-content">
|
|
282
|
+
<div class="item-inner">
|
|
283
|
+
<div class="item-input">
|
|
284
|
+
<input type="email" placeholder="E-mail"/>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</li>
|
|
289
|
+
<li>
|
|
290
|
+
<div class="item-content">
|
|
291
|
+
<div class="item-inner">
|
|
292
|
+
<div class="item-input">
|
|
293
|
+
<select>
|
|
294
|
+
<option>Male</option>
|
|
295
|
+
<option>Female</option>
|
|
296
|
+
</select>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</li>
|
|
301
|
+
<li>
|
|
302
|
+
<div class="item-content">
|
|
303
|
+
<div class="item-inner">
|
|
304
|
+
<div class="item-input">
|
|
305
|
+
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
</li>
|
|
310
|
+
</ul>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="content-block-title">Inset, just inputs</div>
|
|
313
|
+
<div class="list-block inset">
|
|
314
|
+
<ul>
|
|
315
|
+
<ul></ul>
|
|
316
|
+
<li>
|
|
317
|
+
<div class="item-content">
|
|
318
|
+
<div class="item-inner">
|
|
319
|
+
<div class="item-input">
|
|
320
|
+
<input type="text" placeholder="Your name"/>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</li>
|
|
325
|
+
<li>
|
|
326
|
+
<div class="item-content">
|
|
327
|
+
<div class="item-inner">
|
|
328
|
+
<div class="item-input">
|
|
329
|
+
<input type="email" placeholder="E-mail"/>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</li>
|
|
334
|
+
<li>
|
|
335
|
+
<div class="item-content">
|
|
336
|
+
<div class="item-inner">
|
|
337
|
+
<div class="item-input">
|
|
338
|
+
<select>
|
|
339
|
+
<option>Male</option>
|
|
340
|
+
<option>Female</option>
|
|
341
|
+
</select>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</li>
|
|
346
|
+
<li>
|
|
347
|
+
<div class="item-content">
|
|
348
|
+
<div class="item-inner">
|
|
349
|
+
<div class="item-input">
|
|
350
|
+
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</li>
|
|
355
|
+
</ul>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="navbar">
|
|
3
|
+
<div class="navbar-inner">
|
|
4
|
+
<div class="left sliding"><a href="forms.html" class="back link"><i class="icon icon-back"></i><span>Forms</span></a></div>
|
|
5
|
+
<div class="center sliding">Smart Selects</div>
|
|
6
|
+
<div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="pages navbar-through">
|
|
10
|
+
<div data-page="form-selects" class="page">
|
|
11
|
+
<div class="page-content">
|
|
12
|
+
<div class="content-block">Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:</div>
|
|
13
|
+
<div class="list-block">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="#" class="item-link smart-select">
|
|
16
|
+
<select name="fruits">
|
|
17
|
+
<option value="apple" selected="selected">Apple</option>
|
|
18
|
+
<option value="pineapple">Pineapple</option>
|
|
19
|
+
<option value="pear">Pear</option>
|
|
20
|
+
<option value="orange">Orange</option>
|
|
21
|
+
<option value="melon">Melon</option>
|
|
22
|
+
<option value="peach">Peach</option>
|
|
23
|
+
<option value="banana">Banana</option>
|
|
24
|
+
</select>
|
|
25
|
+
<div class="item-content">
|
|
26
|
+
<div class="item-inner">
|
|
27
|
+
<div class="item-title">Fruit</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div></a></li>
|
|
30
|
+
<li><a href="#" class="item-link smart-select">
|
|
31
|
+
<select name="car" multiple="multiple">
|
|
32
|
+
<optgroup label="Japanese">
|
|
33
|
+
<option value="honda" selected="selected">Honda</option>
|
|
34
|
+
<option value="lexus">Lexus</option>
|
|
35
|
+
<option value="mazda">Mazda</option>
|
|
36
|
+
<option value="nissan">Nissan</option>
|
|
37
|
+
<option value="toyota">Toyota</option>
|
|
38
|
+
</optgroup>
|
|
39
|
+
<optgroup label="German">
|
|
40
|
+
<option value="audi" selected="selected">Audi</option>
|
|
41
|
+
<option value="bmw">BMW</option>
|
|
42
|
+
<option value="mercedes">Mercedes</option>
|
|
43
|
+
<option value="vw">Volkswagen</option>
|
|
44
|
+
<option value="volvo">Volvo</option>
|
|
45
|
+
</optgroup>
|
|
46
|
+
<optgroup label="American">
|
|
47
|
+
<option value="cadillac">Cadillac</option>
|
|
48
|
+
<option value="chrysler">Chrysler</option>
|
|
49
|
+
<option value="dodge">Dodge</option>
|
|
50
|
+
<option value="ford" selected="selected">Ford</option>
|
|
51
|
+
</optgroup>
|
|
52
|
+
</select>
|
|
53
|
+
<div class="item-content">
|
|
54
|
+
<div class="item-inner">
|
|
55
|
+
<div class="item-title">Car</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div></a></li>
|
|
58
|
+
<li><a href="#" class="item-link smart-select">
|
|
59
|
+
<select name="mac-windows">
|
|
60
|
+
<option value="mac" selected="selected">Mac</option>
|
|
61
|
+
<option value="windows">Windows</option>
|
|
62
|
+
</select>
|
|
63
|
+
<div class="item-content">
|
|
64
|
+
<div class="item-inner">
|
|
65
|
+
<div class="item-title">Mac or Windows</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div></a></li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|