]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 58085b4)
added: some more demo files
authorFelix Nagel <info@felixnagel.com>
Sun, 28 Nov 2010 23:35:47 +0000 (00:35 +0100)
committerFelix Nagel <info@felixnagel.com>
Sun, 28 Nov 2010 23:35:47 +0000 (00:35 +0100)
demos/selectmenu/dependency.html [new file with mode: 0644] patch | blob
demos/selectmenu/index.html patch | blob | history
demos/selectmenu/methods.html [new file with mode: 0644] patch | blob

diff --git a/demos/selectmenu/dependency.html b/demos/selectmenu/dependency.html
new file mode 100644 (file)
index 0000000..4ce7b81
--- /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 c5e5238727d9488b1130ea94088a1995ba3145f1..8b271410500ff153678d32beabc030b9725abdee 100644 (file)
--- 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 (file)
index 0000000..5504950
--- /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
The official jQuery user interface library: https://github.com/jquery/jquery-ui