-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·159 lines (130 loc) · 6.65 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Flat UI Theme</title>
<link rel="stylesheet" href="themes/flat-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-theme="a">Back</a>
<h1>Flat UI</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a <a href="#">link</a></p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<a href="#" data-role="button" data-theme="b">Click me</a>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-theme="c">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" data-theme="c" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
<div class="ui-body">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<div data-role="fieldcontain">
<label for="name-c">Text Input:</label>
<input type="text" name="name" id="name-c" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-c">Flip switch:</label>
<select name="switch-c" id="switch-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-c">Slider:</label>
<input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
<label for="checkbox-6c">b</label>
<input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
<label for="checkbox-7c"><em>i</em></label>
<input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
<label for="checkbox-8c">u</label>
</fieldset>
</div>
<div data-role="fieldcontain" data-content-theme="b">
<fieldset data-role="controlgroup" data-theme="b">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" data-theme="b" />
<label for="radio-choice-1c">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" data-theme="b" />
<label for="radio-choice-2c">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" data-theme="b" />
<label for="radio-choice-3c">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" data-theme="b" />
<label for="radio-choice-4c">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-c" class="select">Choose shipping method:</label>
<select name="select-choice-c" id="select-choice-c">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<label for="checkbox1">Cheetos</label>
<input type="checkbox" name="checkbox" id="checkbox1" class="custom" />
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear" class="ui-btn-active ui-state-persist">Button 1</a></li>
<li><a href="#" data-icon="refresh">Button 2</a></li>
<li><a href="#" data-icon="check">Button 3</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
</body>
</html>