forked from jquery-archive/jquery-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbars-fixed-forms.html
More file actions
124 lines (108 loc) · 4.69 KB
/
bars-fixed-forms.html
File metadata and controls
124 lines (108 loc) · 4.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Fixed Toolbars</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">
<div data-role="header" data-position="fixed" data-theme="f">
<div class="ui-grid-a">
<h1 style="font-size:19px; margin-left:12px;">2,146 Songs</h1>
</div><!-- /grid-b -->
<div class="ui-bar-d">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:78%">
<label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
<input type="search" name="name" id="search-mini" value="" data-mini="true" placeholder="Search songs..." />
</div>
<div class="ui-block-b" style="width:22%">
<button type="submit" data-mini="true" style="float:right" data-theme="d">Go</button>
</div>
</div><!-- /grid-a -->
</div><!-- /search bar -->
</form>
</div>
<div data-role="content" class="jqm-content">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false">
<li><a href="#">
<img src="../../_assets/img/album-bb.jpg" />
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-hc.jpg" />
<h2>Warning</h2>
<p>Hot Chip</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-p.jpg" />
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-bb.jpg" />
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-hc.jpg" />
<h2>Warning</h2>
<p>Hot Chip</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-p.jpg" />
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-bb.jpg" />
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-hc.jpg" />
<h2>Warning</h2>
<p>Hot Chip</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="../../_assets/img/album-p.jpg" />
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
<a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="slider-2" style="margin-left:15px;">Volume:</label>
<input type="range" name="slider" id="slider-2" value="50" min="0" max="100" data-highlight="true" data-mini="true" class="ui-hidden-accessible" />
</div>
</form>
</div>
</div><!-- /page -->
</body>
</html>