Skip to content

Commit 8e96263

Browse files
fnageljzaefferer
fnagel
authored and
jzaefferer
committed
Selectmenu: Add new production selection demo
Closes jquerygh-1230
1 parent dfb8db2 commit 8e96263

File tree

2 files changed

+94
-0
lines changed

2 files changed

+94
-0
lines changed

‎demos/selectmenu/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
1212
<li><a href="custom_render.html">Custom item rendering functionality</a></li>
13+
<li><a href="product-selection.html">Product Selection</a></li>
1314
</ul>
1415

1516
</body>

‎demos/selectmenu/product-selection.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Selectmenu - Product Selection</title>
7+
<link rel="stylesheet" href="../../themes/base/all.css">
8+
<script src="../../jquery.js"></script>
9+
<script src="../../ui/core.js"></script>
10+
<script src="../../ui/widget.js"></script>
11+
<script src="../../ui/position.js"></script>
12+
<script src="../../ui/menu.js"></script>
13+
<script src="../../ui/selectmenu.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script>
16+
$(function() {
17+
var circle = $( "#circle" );
18+
19+
$( "#radius" ).selectmenu({
20+
change: function( event, data ) {
21+
circle.css({
22+
width: data.item.value,
23+
height: data.item.value
24+
});
25+
}
26+
});
27+
28+
$( "#color" ).selectmenu({
29+
change: function( event, data ) {
30+
circle.css( "background", data.item.value );
31+
}
32+
});
33+
});
34+
</script>
35+
<style>
36+
fieldset {
37+
border: 0;
38+
margin-left: 300px;
39+
}
40+
label {
41+
display: block;
42+
margin: 20px 0 0 0;
43+
}
44+
select {
45+
width: 200px;
46+
}
47+
48+
#circle {
49+
float: left;
50+
background: yellow;
51+
border-radius: 50%;
52+
width: 150px;
53+
height: 150px;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
59+
<div class="demo">
60+
61+
<form action="#">
62+
63+
<div id="circle"></div>
64+
65+
<fieldset>
66+
<label for="radius">Circle radius</label>
67+
<select name="radius" id="radius">
68+
<option value="50">50px</option>
69+
<option value="100">100px</option>
70+
<option value="150" selected="selected">150px</option>
71+
<option value="200">200px</option>
72+
<option value="250">250px</option>
73+
</select>
74+
75+
<label for="color">Circle color</label>
76+
<select name="color" id="color">
77+
<option value="black">Black</option>
78+
<option value="red">Red</option>
79+
<option value="yellow" selected="selected">Yellow</option>
80+
<option value="blue">Blue</option>
81+
<option value="green">Green</option>
82+
</select>
83+
</fieldset>
84+
85+
</form>
86+
87+
</div>
88+
89+
<div class="demo-description">
90+
<p>This Selectmenu Widget demo changes color and radius of a CSS circle. This demo is using the provided callback events.</p>
91+
</div>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)