blob: d508d795bc1d8fd792097c440c239bd16a941285 (
plain)
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
160
161
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Button Static Test : Default</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.6.2.js"></script>
<script type="text/javascript" src="../static.js"></script>
<style>
div { margin: 0 0 1em; }
h2 { margin: 2em 0 1em; }
</style>
</head>
<body>
<h2>Using button elements</h2>
<div>
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button</span>
</button>
<button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</button>
<button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>
<button class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</button>
<button class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>
<button class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Both icons</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>
<button class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">No text</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>
</div>
<h2>Using anchor elements</h2>
<div>
<a href="#" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button</span>
</a>
<a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</a>
<a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</a>
<a href="#" class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</a>
<a href="#" class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</a>
<a href="#" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Both icons</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</a>
<a href="#" class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">No text</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</a>
</div>
<h2>Using label elements (used when proxying to radio or check inputs)</h2>
<div>
<label class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button</span>
</label>
<label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</label>
<label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</label>
<label class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Primary icon</span>
</label>
<label class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Secondary icon</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</label>
<label class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">Both icons</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</label>
<label class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
<span class="ui-button-text">No text</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</label>
</div>
<h2>Button Sets</h2>
<div class="ui-buttonset">
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">First</span></button>
<button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>
<button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Last</span></button>
</div>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>
$('<div/>').css({
position: "absolute",
right: 10,
top: 10
}).appendTo(document.body).themeswitcher();
</script>
</body>
</html>
|
