diff options
| author | Felix Nagel <info@felixnagel.com> | 2010-11-29 00:35:47 +0100 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2010-11-29 00:35:47 +0100 |
| commit | cc6290c6f8cbec4a36556a0e7c7cb69b23ad2a6c (patch) | |
| tree | 735d063c72f83e9368d1a766d3b20cb048460a19 | |
| parent | 58085b49f6377e874cef540d2f4d68f113d2d651 (diff) | |
| download | jquery-ui-cc6290c6f8cbec4a36556a0e7c7cb69b23ad2a6c.tar.gz jquery-ui-cc6290c6f8cbec4a36556a0e7c7cb69b23ad2a6c.zip | |
added: some more demo files
| -rw-r--r-- | demos/selectmenu/dependency.html | 76 | ||||
| -rw-r--r-- | demos/selectmenu/index.html | 2 | ||||
| -rw-r--r-- | demos/selectmenu/methods.html | 61 |
3 files changed, 139 insertions, 0 deletions
diff --git a/demos/selectmenu/dependency.html b/demos/selectmenu/dependency.html new file mode 100644 index 000000000..4ce7b814b --- /dev/null +++ b/demos/selectmenu/dependency.html @@ -0,0 +1,76 @@ +<!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.4.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; } + label,select,.ui-select-menu { float: left; margin-right: 10px; } + select { width: 200px; } + </style> + <script type="text/javascript"> + $(function(){ + $('select#switch').selectmenu({ + style:'popup', + // use seleect callback + select: function(event, options) { + if (options.value == 1) { + $('select#ghost').parent("fieldset").show(); + } else { + $('select#ghost').parent("fieldset").hide(); + } + } + }); + + var ghost = $('select#ghost').selectmenu({ + maxHeight: 150 + }).parent("fieldset").hide(); + }); + </script> +</head> +<body> + <br /> + <br /> + <form action="#"> + + <fieldset> + <label for="switch">Select a Speed:</label> + <select name="switch" id="switch"> + <option value="1">shown</option> + <option value="0" selected="selected">hidden</option> + </select> + </fieldset> + + <fieldset> + <label for="ghost">Hiding in the dark</label> + <select name="ghost" id="ghost"> + <option value="Slower">-6 Slower</option> + <option value="Slower">-5 Slower</option> + <option value="Slower">-4 Slower</option> + <option value="Slow">-3 Slow</option> + <option value="Slow">-2 Slow</option> + <option value="Slow">-1 Slow</option> + <option value="Medium" selected="selected">0 Medium</option> + <option value="Fast">1 Fast</option> + <option value="Fast">2 Fast</option> + <option value="Fast">3 Fast</option> + <option value="Faster">4 Faster</option> + <option value="Faster">5 Faster</option> + <option value="Faster">6 Faster</option> + </select> + </fieldset> + </form> +</body> +</html>
\ No newline at end of file diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html index c5e523872..8b2714105 100644 --- a/demos/selectmenu/index.html +++ b/demos/selectmenu/index.html @@ -14,6 +14,8 @@ <li class="demo-config-on"><a href="disable_enable.html">Disable example</a></li> <li class="demo-config-on"><a href="ajax.html">Select callback with AJAX</a></li> <li class="demo-config-on"><a href="background_image.html">Background image example</a></li> + <li class="demo-config-on"><a href="method.html">How to use a method</a></li> + <li class="demo-config-on"><a href="dependency.html">Simple dependency example</a></li> </ul> </div> diff --git a/demos/selectmenu/methods.html b/demos/selectmenu/methods.html new file mode 100644 index 000000000..5504950a6 --- /dev/null +++ b/demos/selectmenu/methods.html @@ -0,0 +1,61 @@ +<!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.4.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; } + label,select,.ui-select-menu { float: left; margin-right: 10px; } + select { width: 200px; } + </style> + <script type="text/javascript"> + $(function(){ + var speedA = $('select#speedA').selectmenu( + ); + + $("#getValue").click(function(event){ + console.log($('select#speedA').selectmenu("value")); + }); + $("#setValue").click(function(event){ + console.log($('select#speedA').selectmenu("value", 4)); + }); + }); + </script> + <!-- + <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script> + --> +</head> +<body> + <br /> + <br /> + <form action="#"> + <a href="#nogo" id="getValue">getValue</a> + <a href="#nogo" id="setValue">setValue to 4</a> + <br /> + <h2>"default popup" Style</h2> + <fieldset> + <label for="speedA">Select a Speed:</label> + <select name="speedA" id="speedA"> + <option value="Slower">Slower</option> + <option value="Slow" selected="selected">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 |