Skip to content

Commit cc6290c

Browse files
fnagelfnagel
committed
added: some more demo files
1 parent 58085b4 commit cc6290c

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎demos/selectmenu/dependency.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Demo Page for jQuery UI selectmenu</title>
6+
7+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
8+
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
9+
<script type="text/javascript" src="../../jquery-1.4.4.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13+
14+
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
15+
16+
<style type="text/css">
17+
/* demo styles */
18+
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
19+
fieldset { border:0; }
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
</style>
23+
<script type="text/javascript">
24+
$(function(){
25+
$('select#switch').selectmenu({
26+
style:'popup',
27+
// use seleect callback
28+
select: function(event, options) {
29+
if (options.value == 1) {
30+
$('select#ghost').parent("fieldset").show();
31+
} else {
32+
$('select#ghost').parent("fieldset").hide();
33+
}
34+
}
35+
});
36+
37+
var ghost = $('select#ghost').selectmenu({
38+
maxHeight: 150
39+
}).parent("fieldset").hide();
40+
});
41+
</script>
42+
</head>
43+
<body>
44+
<br />
45+
<br />
46+
<form action="#">
47+
48+
<fieldset>
49+
<label for="switch">Select a Speed:</label>
50+
<select name="switch" id="switch">
51+
<option value="1">shown</option>
52+
<option value="0" selected="selected">hidden</option>
53+
</select>
54+
</fieldset>
55+
56+
<fieldset>
57+
<label for="ghost">Hiding in the dark</label>
58+
<select name="ghost" id="ghost">
59+
<option value="Slower">-6 Slower</option>
60+
<option value="Slower">-5 Slower</option>
61+
<option value="Slower">-4 Slower</option>
62+
<option value="Slow">-3 Slow</option>
63+
<option value="Slow">-2 Slow</option>
64+
<option value="Slow">-1 Slow</option>
65+
<option value="Medium" selected="selected">0 Medium</option>
66+
<option value="Fast">1 Fast</option>
67+
<option value="Fast">2 Fast</option>
68+
<option value="Fast">3 Fast</option>
69+
<option value="Faster">4 Faster</option>
70+
<option value="Faster">5 Faster</option>
71+
<option value="Faster">6 Faster</option>
72+
</select>
73+
</fieldset>
74+
</form>
75+
</body>
76+
</html>

‎demos/selectmenu/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ <h4>Examples</h4>
1414
<li class="demo-config-on"><a href="disable_enable.html">Disable example</a></li>
1515
<li class="demo-config-on"><a href="ajax.html">Select callback with AJAX</a></li>
1616
<li class="demo-config-on"><a href="background_image.html">Background image example</a></li>
17+
<li class="demo-config-on"><a href="method.html">How to use a method</a></li>
18+
<li class="demo-config-on"><a href="dependency.html">Simple dependency example</a></li>
1719
</ul>
1820
</div>
1921

‎demos/selectmenu/methods.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Demo Page for jQuery UI selectmenu</title>
6+
7+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
8+
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
9+
<script type="text/javascript" src="../../jquery-1.4.4.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13+
14+
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
15+
16+
<style type="text/css">
17+
/* demo styles */
18+
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
19+
fieldset { border:0; }
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
</style>
23+
<script type="text/javascript">
24+
$(function(){
25+
var speedA = $('select#speedA').selectmenu(
26+
);
27+
28+
$("#getValue").click(function(event){
29+
console.log($('select#speedA').selectmenu("value"));
30+
});
31+
$("#setValue").click(function(event){
32+
console.log($('select#speedA').selectmenu("value", 4));
33+
});
34+
});
35+
</script>
36+
<!--
37+
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
38+
<script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script>
39+
-->
40+
</head>
41+
<body>
42+
<br />
43+
<br />
44+
<form action="#">
45+
<a href="#nogo" id="getValue">getValue</a>
46+
<a href="#nogo" id="setValue">setValue to 4</a>
47+
<br />
48+
<h2>"default popup" Style</h2>
49+
<fieldset>
50+
<label for="speedA">Select a Speed:</label>
51+
<select name="speedA" id="speedA">
52+
<option value="Slower">Slower</option>
53+
<option value="Slow" selected="selected">Slow</option>
54+
<option value="Medium">Medium</option>
55+
<option value="Fast">Fast</option>
56+
<option value="Faster">Faster</option>
57+
</select>
58+
</fieldset>
59+
</form>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)