diff options
| -rw-r--r-- | demos/selectmenu/default.html | 30 | ||||
| -rw-r--r-- | tests/visual/selectmenu/disabled.html | 136 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 5 |
3 files changed, 156 insertions, 15 deletions
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index e82ad7a95..eecc25d12 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -14,18 +14,18 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $('select#speedA').selectmenu({ + $('select#speed').selectmenu({ dropdown: false }); - $('select#speedB').selectmenu({ + $('select#number').selectmenu({ dropdown: false, wrapperElement: '<div class="overflow"/>' }); - $('select#filesC').selectmenu(); + $('select#files').selectmenu(); }); </script> <style> - form { margin: 200px 0 0 0; } + form { margin: 100px 0 0 0 } fieldset { border: 0; } select { width: 200px; } .overflow ul { height: 200px; overflow: auto; } @@ -37,8 +37,8 @@ <form action="#"> <fieldset> - <label for="speedA">Select a Speed:</label> - <select name="speedA" id="speedA"> + <label for="speed">Select a speed:</label> + <select name="speed" id="speed"> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Medium" selected="selected">Medium</option> @@ -48,8 +48,8 @@ <br /> <br /> <br /> - <label for="speedB">Select a Speed:</label> - <select name="speedB" id="speedB"> + <label for="number">Select a number:</label> + <select name="number" id="number"> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> @@ -73,14 +73,14 @@ <br /> <br /> <br /> - <label for="filesC">Select a file:</label> - <select name="filesC" id="filesC"> - <optgroup label="scripts"> + <label for="files">Select a file:</label> + <select name="files" id="files"> + <optgroup label="Scripts"> <option value="jquery">jQuery.js</option> <option value="jqueryui">ui.jQuery.js</option> </optgroup> - <optgroup label="Label with space"> - <option disabled="disabled" value="somefile">Some unknown file</option> + <optgroup label="Other files"> + <option value="somefile">Some unknown file</option> <option value="someotherfile">Some other file</option> </optgroup> </select> @@ -92,8 +92,8 @@ <div class="demo-description"> -<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> -<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> +<p>The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization </p> +<p>The datasource is a native select element or a simple JavaScript array, provided to the widget using the source-option.</p> </div><!-- End demo-description --> </body> diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html new file mode 100644 index 000000000..baf0dcf46 --- /dev/null +++ b/tests/visual/selectmenu/disabled.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectmenu - Default functionality</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.6.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script src="../../../ui/jquery.ui.selectmenu.js"></script> + <link rel="stylesheet" href="../../../demos/demos.css"> + <script> + $(function() { + $('select#speed').selectmenu({ + dropdown: false + }); + $('select#number').selectmenu({ + dropdown: false, + wrapperElement: '<div class="overflow"/>' + }); + $('select#files').selectmenu(); + var files2 = $('select#files2').selectmenu(); + + $("#disable_select").toggle( function() { + files2.selectmenu("disable"); + }, function() { + files2.removeAttr("disabled"); + files2.selectmenu("refresh"); + }); + $("#disable_option").toggle( function() { + files2.find("option:eq(0)").attr("disabled", "disabled"); + files2.selectmenu("refresh"); + }, function() { + files2.find("option:eq(0)").removeAttr("disabled"); + files2.selectmenu("refresh"); + }); + $("#disable_optgroup").toggle( function() { + files2.find("optgroup:eq(0)").attr("disabled", "disabled"); + //files2.selectmenu("refresh"); + }, function() { + files2.find("option:eq(0)").removeAttr("disabled"); + //files2.selectmenu("refresh"); + + }); + }); + </script> + <style> + form { margin: 100px 0 0 0 } + fieldset { border: 0; } + select { width: 200px; } + .overflow ul { height: 200px; overflow: auto; } + </style> +</head> +<body> + +<div class="demo"> + +<form action="#"> + <fieldset> + <label for="speed">Select a speed:</label> + <select disabled="disabled" name="speed" id="speed"> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> + <br /> + <br /> + <br /> + <label for="number">Select a number:</label> + <select name="number" id="number"> + <option value="1">1</option> + <option value="2" selected="selected">2</option> + <option value="3">3</option> + <option disabled="disabled" value="4">4</option> + <option value="5">5</option> + <option value="6">6</option> + <option value="7">7</option> + <option disabled="disabled" value="8">8</option> + <option value="9">9</option> + <option value="10">10</option> + <option disabled="disabled" value="11">11</option> + <option value="12">12</option> + <option value="13">13</option> + <option disabled="disabled" value="14">14</option> + <option disabled="disabled" value="15">15</option> + <option value="16">16</option> + <option value="17">17</option> + <option value="18">18</option> + <option value="19">19</option> + </select> + <br /> + <br /> + <br /> + <label for="files">Select a file:</label> + <select name="files" id="files"> + <optgroup disabled="disabled" label="Scripts"> + <option value="jquery">jQuery.js</option> + <option value="jqueryui">ui.jQuery.js</option> + </optgroup> + <optgroup label="Other files"> + <option value="somefile">Some unknown file</option> + <option value="someotherfile">Some other file</option> + </optgroup> + </select> + <br /> + <br /> + <br /> + <label for="files2">Select a file:</label> + <select name="files2" id="files2"> + <optgroup label="Scripts"> + <option value="jquery">jQuery.js</option> + <option value="jqueryui">ui.jQuery.js</option> + </optgroup> + <optgroup label="Other files"> + <option value="somefile">Some unknown file</option> + <option value="someotherfile">Some other file</option> + </optgroup> + </select> + <br /> + <button id="disable_select">Toggle disable select</button> + <button id="disable_option">Toggle disable option</button> + <button id="disable_optgroup">Toggle disable optgroup</button> + </fieldset> +</form> + +</div><!-- End demo --> + + + +</body> +</html> diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 4cb72ae57..6d54fa248 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -351,6 +351,11 @@ $.widget( "ui.selectmenu", { } if ( key === "disabled" ) { this.newelement.button( "option", "disabled", value ); + if ( value ) { + this.element.attr( "disabled", "disabled" ); + } else { + this.element.removeAttr( "disabled" ); + } this.list.attr( "aria-disabled", value ); this.close(); } |