-
Notifications
You must be signed in to change notification settings - Fork 0
/
elements.html
125 lines (112 loc) · 6.95 KB
/
elements.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="panel" data-position="right" data-theme="a" data-display="push"></div>
<div data-role="header">
<a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a>
<h1>A</h1>
<a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
</div>
<div data-role="content" role="main">
<p>Sample text and <a href="#">links</a>.</p>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button data-icon="flat-settings" data-theme="a">Button A</button></div>
<div class="ui-block-b"><button data-icon="flat-new" data-theme="b">Button B</button></div>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button data-icon="flat-man" data-theme="c">Button C</button></div>
<div class="ui-block-b"><button data-icon="flat-mail" data-theme="d">Button D</button></div>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button data-icon="flat-lock" data-theme="e">Button E</button></div>
<div class="ui-block-b"><button data-icon="flat-menu" data-theme="f">Button F</button></div>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button data-icon="flat-heart" data-theme="g">Button G</button></div>
</fieldset>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="a">List Header</li>
<li>Read-only list item</li>
<li><a href="#">Linked list item</a></li>
</ul>
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsible" data-collapsed-icon="flat-time" data-expanded-icon="flat-cross" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" data-collapsed-icon="flat-calendar" data-expanded-icon="flat-cross">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" data-collapsed-icon="flat-settings" data-expanded-icon="flat-cross">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-a" data-theme="c" id="radio-choice-1-a" value="choice-1" checked="checked" />
<label for="radio-choice-1-a">Radio</label>
<input type="checkbox" name="checkbox-a" data-theme="c" id="checkbox-a" checked="checked" />
<label for="checkbox-a">Checkbox</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="flat-video" data-iconpos="notext" data-theme="b" data-inline="true">Video</a>
<a href="#" data-role="button" data-icon="flat-time" data-iconpos="notext" data-theme="b" data-inline="true">Time</a>
<a href="#" data-role="button" data-icon="flat-settings" data-iconpos="notext" data-theme="b" data-inline="true">Settings</a>
<a href="#" data-role="button" data-icon="flat-plus" data-iconpos="notext" data-theme="b" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="flat-new" data-iconpos="notext" data-theme="b" data-inline="true">New</a>
<a href="#" data-role="button" data-icon="flat-menu" data-iconpos="notext" data-theme="b" data-inline="true">Menu</a>
<a href="#" data-role="button" data-icon="flat-man" data-iconpos="notext" data-theme="b" data-inline="true">Man</a>
<a href="#" data-role="button" data-icon="flat-mail" data-iconpos="notext" data-theme="b" data-inline="true">Mail</a>
<a href="#" data-role="button" data-icon="flat-lock" data-iconpos="notext" data-theme="b" data-inline="true">Lock</a>
<a href="#" data-role="button" data-icon="flat-location" data-iconpos="notext" data-theme="b" data-inline="true">Location</a>
<a href="#" data-role="button" data-icon="flat-heart" data-iconpos="notext" data-theme="b" data-inline="true">Heart</a>
<a href="#" data-role="button" data-icon="flat-eye" data-iconpos="notext" data-theme="b" data-inline="true">Eye</a>
<a href="#" data-role="button" data-icon="flat-cross" data-iconpos="notext" data-theme="b" data-inline="true">Cross</a>
<a href="#" data-role="button" data-icon="flat-cmd" data-iconpos="notext" data-theme="b" data-inline="true">Cmd</a>
<a href="#" data-role="button" data-icon="flat-checkround" data-iconpos="notext" data-theme="b" data-inline="true">Checkround</a>
<a href="#" data-role="button" data-icon="flat-calendar" data-iconpos="notext" data-theme="b" data-inline="true">Calendar</a>
<a href="#" data-role="button" data-icon="flat-bubble" data-iconpos="notext" data-theme="b" data-inline="true">Bubble</a>
<a href="#" data-role="button" data-icon="flat-volume" data-iconpos="notext" data-theme="b" data-inline="true">Volume</a>
<a href="#" data-role="button" data-icon="flat-camera" data-iconpos="notext" data-theme="b" data-inline="true">Camera</a>
</div>
<select name="flip-1" id="flip-1" data-theme="b" data-role="slider">
<option value="off">Off</option>
<option value="on" selected>On</option>
</select>
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-icon="flat-mail" data-theme="a" data-iconpos="notext" data-role="button">Yes</a>
<a href="#" data-icon="flat-camera" data-theme="a" data-iconpos="notext" data-role="button">Yes</a>
<a href="#" data-icon="flat-heart" data-theme="a" data-iconpos="notext" data-role="button">Yes</a>
<a href="#" data-icon="flat-eye" data-theme="a" data-iconpos="notext" data-role="button">Yes</a>
</div>
</div>
<div data-role="fieldcontain">
<select name="select-choice" id="select-choice-a" data-native-menu="false" data-theme="a">
<option value="standard">Option 1</option>
<option value="rush">Option 2</option>
<option value="express">Option 3</option>
<option value="overnight">Option 4</option>
</select>
</div>
<input type="text" placeholder="Text Input" />
<div data-role="fieldcontain">
<input type="range" name="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
</div>
</div>
<div id="highlight"> </div>
</body>
</html>