Skip to content

Commit b582c96

Browse files
fnagelfnagel
committed
added: disable and ajax demo
1 parent ededb3a commit b582c96

3 files changed

Lines changed: 185 additions & 0 deletions

File tree

‎demos/selectmenu/ajax.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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.2.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; margin: 20px 0 0 0;}
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
23+
/*select with custom icons*/
24+
body a.customicons { height: 2.8em;}
25+
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
26+
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
27+
body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
28+
body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
29+
body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
30+
31+
32+
</style>
33+
<script type="text/javascript">
34+
$(function(){
35+
36+
var speedA = $('select#speedA').selectmenu({
37+
select: function(event, options) {
38+
$.ajax({
39+
data: "get_data=" + options.value,
40+
type: "GET",
41+
// you need a serversite script which checks the username
42+
url: "ajax/get_data.php",
43+
success: function(value) {
44+
// add the returned HTML (the new select)
45+
$("#result_data").html(value).find("select").selectmenu();
46+
47+
}
48+
});
49+
}
50+
});
51+
52+
});
53+
54+
</script>
55+
</head>
56+
<body>
57+
<form action="#">
58+
<h2>Ajax Example</h2>
59+
<fieldset>
60+
<label for="speedA">Select an Option:</label>
61+
<select name="speedA" id="speedA">
62+
<option value="0">Default</option>
63+
<option value="1">Ajax Call</option>
64+
</select>
65+
</fieldset>
66+
</form>
67+
68+
<div id="result_data"></div>
69+
</body>
70+
</html>

‎demos/selectmenu/ajax/get_data.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php
2+
// echo $_GET['get_data'];
3+
?>
4+
5+
<label for="speedB">Select an Address:</label>
6+
<select name="speedB" id="speedB">
7+
<option value="1">John Doe</option>
8+
<option value="3">Joseph Doe</option>
9+
<option value="4">Mad Doe Kiiid</option>
10+
</select>
11+
12+
13+

‎demos/selectmenu/disable_enable.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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.2.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; margin: 20px 0 0 0;}
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
23+
/*select with custom icons*/
24+
body a.customicons { height: 2.8em;}
25+
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
26+
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
27+
body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
28+
body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
29+
body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
30+
31+
32+
</style>
33+
<script type="text/javascript">
34+
$(function(){
35+
36+
var speedB = $('select#speedB').selectmenu();
37+
38+
// does not work see:
39+
var speedA = $('select#speedA').selectmenu({
40+
select: function(event, options) {
41+
if (options.value) {
42+
speedB.selectmenu('enable');
43+
} else {
44+
speedB.selectmenu('disable');
45+
}
46+
}
47+
});
48+
49+
$("#on").click(function(){
50+
speedB.selectmenu("enable");
51+
});
52+
53+
$("#off").click(function(){
54+
speedB.selectmenu("disable");
55+
});
56+
57+
58+
var speedA = $('select#speedC').selectmenu();
59+
60+
});
61+
62+
</script>
63+
</head>
64+
<body>
65+
<form action="#">
66+
<h2>Disabled by select callback (does not work)</h2>
67+
<fieldset>
68+
<label for="speedA">Select a Speed:</label>
69+
<select name="speedA" id="speedA">
70+
<option value="1">On</option>
71+
<option value="0">Off</option>
72+
</select>
73+
</fieldset>
74+
75+
<a href="#nogo" id="on">on</a><br />
76+
<a href="#nogo" id="off">off</a><br />
77+
<h2>Disble by links above</h2>
78+
<fieldset>
79+
<label for="speedB">Select an Address:</label>
80+
<select name="speedB" id="speedB">
81+
<option value="Slower" selected="selected">Slower</option>
82+
<option value="Slow">Slow</option>
83+
<option value="Medium">Medium</option>
84+
<option value="Fast">Fast</option>
85+
<option value="Faster">Faster</option>
86+
</select>
87+
</fieldset>
88+
89+
<h2>Disabled by HTML (initinal)</h2>
90+
<fieldset>
91+
<label for="speedC">Select an Address:</label>
92+
<select disabled="disabled" name="speedC" id="speedC">
93+
<option value="Slower" selected="selected">Slower</option>
94+
<option value="Slow">Slow</option>
95+
<option value="Medium">Medium</option>
96+
<option value="Fast">Fast</option>
97+
<option value="Faster">Faster</option>
98+
</select>
99+
</fieldset>
100+
</form>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)