--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Demo Page for jQuery UI selectmenu</title>
+
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+
+ <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
+
+ <style type="text/css">
+ /*demo styles*/
+ body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
+ fieldset { border:0; margin: 20px 0 0 0;}
+ label,select,.ui-select-menu { float: left; margin-right: 10px; }
+ select { width: 200px; }
+
+ /*select with custom icons*/
+ body a.customicons { height: 2.8em;}
+ body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
+ body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
+ body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
+ body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
+ body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
+
+
+ </style>
+ <script type="text/javascript">
+ $(function(){
+
+ var speedA = $('select#speedA').selectmenu({
+ select: function(event, options) {
+ $.ajax({
+ data: "get_data=" + options.value,
+ type: "GET",
+ // you need a serversite script which checks the username
+ url: "ajax/get_data.php",
+ success: function(value) {
+ // add the returned HTML (the new select)
+ $("#result_data").html(value).find("select").selectmenu();
+
+ }
+ });
+ }
+ });
+
+ });
+
+ </script>
+</head>
+<body>
+ <form action="#">
+ <h2>Ajax Example</h2>
+ <fieldset>
+ <label for="speedA">Select an Option:</label>
+ <select name="speedA" id="speedA">
+ <option value="0">Default</option>
+ <option value="1">Ajax Call</option>
+ </select>
+ </fieldset>
+ </form>
+
+ <div id="result_data"></div>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Demo Page for jQuery UI selectmenu</title>
+
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+
+ <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
+
+ <style type="text/css">
+ /*demo styles*/
+ body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
+ fieldset { border:0; margin: 20px 0 0 0;}
+ label,select,.ui-select-menu { float: left; margin-right: 10px; }
+ select { width: 200px; }
+
+ /*select with custom icons*/
+ body a.customicons { height: 2.8em;}
+ body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
+ body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
+ body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
+ body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
+ body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
+
+
+ </style>
+ <script type="text/javascript">
+ $(function(){
+
+ var speedB = $('select#speedB').selectmenu();
+
+ // does not work see:
+ var speedA = $('select#speedA').selectmenu({
+ select: function(event, options) {
+ if (options.value) {
+ speedB.selectmenu('enable');
+ } else {
+ speedB.selectmenu('disable');
+ }
+ }
+ });
+
+ $("#on").click(function(){
+ speedB.selectmenu("enable");
+ });
+
+ $("#off").click(function(){
+ speedB.selectmenu("disable");
+ });
+
+
+ var speedA = $('select#speedC').selectmenu();
+
+ });
+
+ </script>
+</head>
+<body>
+ <form action="#">
+ <h2>Disabled by select callback (does not work)</h2>
+ <fieldset>
+ <label for="speedA">Select a Speed:</label>
+ <select name="speedA" id="speedA">
+ <option value="1">On</option>
+ <option value="0">Off</option>
+ </select>
+ </fieldset>
+
+ <a href="#nogo" id="on">on</a><br />
+ <a href="#nogo" id="off">off</a><br />
+ <h2>Disble by links above</h2>
+ <fieldset>
+ <label for="speedB">Select an Address:</label>
+ <select name="speedB" id="speedB">
+ <option value="Slower" selected="selected">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+
+ <h2>Disabled by HTML (initinal)</h2>
+ <fieldset>
+ <label for="speedC">Select an Address:</label>
+ <select disabled="disabled" name="speedC" id="speedC">
+ <option value="Slower" selected="selected">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+ </form>
+</body>
+</html>
\ No newline at end of file
projects / jquery-ui.git / commitdiff