Skip to content

Commit 87b26f2

Browse files
arschmitzarschmitz
committed
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
1 parent d918911 commit 87b26f2

File tree

13 files changed

+1654
-26
lines changed

13 files changed

+1654
-26
lines changed

‎demos/button/icons.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h1>Widget</h1>
3939
<button>Button with icon on the left</button>
4040
<button>Button with icon on the right</button>
4141
<button>Button with icon on the bottom</button>
42+
<button>Button with icon on the top</button>
4243
</div>
4344
<div class="css">
4445
<h1>CSS</h1>

‎demos/controlgroup/default.html

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Controlgroup - Default Funstionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/button.js"></script>
11+
<script src="../../ui/checkboxradio.js"></script>
12+
<script src="../../ui/menu.js"></script>
13+
<script src="../../ui/position.js"></script>
14+
<script src="../../ui/selectmenu.js"></script>
15+
<script src="../../ui/controlgroup.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
18+
$(function() {
19+
$( ".controlgroup" ).eq( 0 ).controlgroup()
20+
.end().eq( 1 ).controlgroup({
21+
"direction": "vertical"
22+
});
23+
});
24+
</script>
25+
<style>
26+
.ui-controlgroup-vertical {
27+
width: 300px;
28+
}
29+
.ui-controlgroup-vertical select {
30+
width: 100%;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div class="demo-description">
36+
<p>Some buttons with various combinations of text and icons.</p>
37+
</div>
38+
<div class="widget">
39+
<h1>Widget</h1>
40+
<div class="controlgroup">
41+
<button style="display:none">Button with icon only</button>
42+
<select>
43+
<option>Fast</option>
44+
<option>Medium</option>
45+
<option>Slow</option>
46+
</select>
47+
<label for="checkbox">Checkbox</label>
48+
<input type="checkbox" value="checkbox" id="checkbox" />
49+
<select>
50+
<option>Fast</option>
51+
<option>Medium</option>
52+
<option>Slow</option>
53+
</select>
54+
<button>Button with icon on the bottom</button>
55+
<select>
56+
<option>Fast</option>
57+
<option>Medium</option>
58+
<option>Slow</option>
59+
</select>
60+
</div>
61+
<br/>
62+
<div class="controlgroup">
63+
<button style="display:none">Button with icon only</button>
64+
<select>
65+
<option>Fast</option>
66+
<option>Medium</option>
67+
<option>Slow</option>
68+
</select>
69+
<label for="checkbox2">Checkbox</label>
70+
<input type="checkbox" value="checkbox2" id="checkbox2" />
71+
<select>
72+
<option>Fast</option>
73+
<option>Medium</option>
74+
<option>Slow</option>
75+
</select>
76+
<button>Button with icon on the bottom</button>
77+
<select>
78+
<option>Fast</option>
79+
<option>Medium</option>
80+
<option>Slow</option>
81+
</select>
82+
</div>
83+
</div>
84+
<div class="css">
85+
<h1>CSS</h1>
86+
<div class="ui-controlgroup">
87+
<button class="ui-button ui-widget ui-corner-left ui-button-icon-only" title="Button with icon only">
88+
<span class="ui-icon ui-icon-gear"></span>
89+
Button with icon only
90+
</button>
91+
<button class="ui-button ui-widget ui-icon-beginning">
92+
<span class="ui-icon ui-icon-triangle-1-w"></span>
93+
Button with icon on the left
94+
</button>
95+
<button class="ui-button ui-widget ui-icon-end">
96+
<span class="ui-icon ui-icon-triangle-1-e"></span>
97+
Button with icon on the right
98+
</button>
99+
<button class="ui-button ui-widget">
100+
Button with icon on bottom
101+
</button>
102+
<button class="ui-button ui-widget ui-corner-right">
103+
Button with icon on top
104+
</button>
105+
</div>
106+
<br/>
107+
<div class="ui-controlgroup ui-controlgroup-vertical">
108+
<button class="ui-button ui-widget ui-corner-top ui-button-icon-only" title="Button with icon only">
109+
<span class="ui-icon ui-icon-gear"></span>
110+
Button with icon only
111+
</button>
112+
<button class="ui-button ui-widget ui-icon-beginning">
113+
<span class="ui-icon ui-icon-triangle-1-w"></span>
114+
Button with icon on the left
115+
</button>
116+
<button class="ui-button ui-widget ui-icon-end">
117+
<span class="ui-icon ui-icon-triangle-1-e"></span>
118+
Button with icon on the right
119+
</button>
120+
<button class="ui-button ui-widget ui-icon-bottom">
121+
<span class="ui-icon ui-icon-triangle-1-s"></span>
122+
Button with icon on bottom
123+
</button>
124+
<button class="ui-button ui-widget ui-corner-bottom ui-icon-top">
125+
<span class="ui-icon ui-icon-triangle-1-n"></span>
126+
Button with icon on top
127+
</button>
128+
</div>
129+
</div>
130+
</body>
131+
</html>

0 commit comments

Comments
 (0)