diff options
author | Felix Nagel <info@felixnagel.com> | 2012-12-13 01:15:48 +0100 |
---|---|---|
committer | Felix Nagel <info@felixnagel.com> | 2012-12-13 01:15:48 +0100 |
commit | 21e46b8bc6cf09cb22ac041074275507539d9d80 (patch) | |
tree | 11bd1b173e84d26602dbe5568e40951ede0d4efe /tests | |
parent | 1ea22565d33760dfcc6c296b0586e459412c2218 (diff) | |
download | jquery-ui-21e46b8bc6cf09cb22ac041074275507539d9d80.tar.gz jquery-ui-21e46b8bc6cf09cb22ac041074275507539d9d80.zip |
Selectmenu tests: improve and merge visual tests
Diffstat (limited to 'tests')
-rw-r--r-- | tests/visual/selectmenu/disabled_empty.html (renamed from tests/visual/selectmenu/disabled.html) | 95 | ||||
-rw-r--r-- | tests/visual/selectmenu/empty.html | 73 | ||||
-rw-r--r-- | tests/visual/selectmenu/events.html | 73 | ||||
-rw-r--r-- | tests/visual/selectmenu/events_methods.html | 119 | ||||
-rw-r--r-- | tests/visual/selectmenu/methods.html | 86 |
5 files changed, 183 insertions, 263 deletions
diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled_empty.html index 4617e5ba9..a15b333b1 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/tests/visual/selectmenu/disabled_empty.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>jQuery UI Selectmenu - Disable functionality</title> + <title>jQuery UI Selectmenu - Disabled & empty elements functionality</title> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.8.3.js"></script> <script src="../../../ui/jquery.ui.core.js"></script> @@ -13,40 +13,43 @@ <link rel="stylesheet" href="../../../demos/demos.css"> <script> $(function() { - $('select#speed').selectmenu({ + /* disabled */ + $('select#disabled1').selectmenu({ dropdown: false }); - var withOverflow = $('select#number').selectmenu({ + var withOverflow = $('select#disabled2').selectmenu({ dropdown: false }); withOverflow.selectmenu("menuWidget").addClass("overflow"); - $('select#files').selectmenu(); - var files2 = $('select#files2').selectmenu(); + $('select#disabled3').selectmenu(); + var disabled4 = $('select#disabled4').selectmenu(); $("#disable_select").toggle( function() { - files2.selectmenu("disable"); + disabled4.selectmenu("disable"); }, function() { - files2.removeAttr("disabled"); - files2.selectmenu("refresh"); + disabled4.removeAttr("disabled"); + disabled4.selectmenu("refresh"); }); $("#disable_option").toggle( function() { - files2.find("option:eq(0)").attr("disabled", "disabled"); - files2.selectmenu("refresh"); + disabled4.find("option:eq(0)").attr("disabled", "disabled"); + disabled4.selectmenu("refresh"); }, function() { - files2.find("option:eq(0)").removeAttr("disabled"); - files2.selectmenu("refresh"); + disabled4.find("option:eq(0)").removeAttr("disabled"); + disabled4.selectmenu("refresh"); }); $("#disable_optgroup").toggle( function() { - files2.find("optgroup:eq(0)").attr("disabled", "disabled"); - files2.selectmenu("refresh"); + disabled4.find("optgroup:eq(0)").attr("disabled", "disabled"); + disabled4.selectmenu("refresh"); }, function() { - files2.find("optgroup:eq(0)").removeAttr("disabled"); - files2.selectmenu("refresh"); + disabled4.find("optgroup:eq(0)").removeAttr("disabled"); + disabled4.selectmenu("refresh"); }); + + /* empty */ + $('select.empty').selectmenu(); }); </script> <style> - form { margin: 100px 0 0 0 } fieldset { border: 0; } label { display: block; } select { width: 200px; } @@ -58,9 +61,10 @@ <div class="demo"> <form action="#"> + <h2>Disabled Tests</h2> <fieldset> - <label for="speed">Select a speed:</label> - <select disabled="disabled" name="speed" id="speed"> + <label for="disabled1">Select a speed:</label> + <select disabled="disabled" name="disabled1" id="disabled1"> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Medium" selected="selected">Medium</option> @@ -69,9 +73,8 @@ </select> <br /> <br /> - <br /> - <label for="number">Select a number:</label> - <select name="number" id="number"> + <label for="disabled2">Select a number:</label> + <select name="disabled2" id="disabled2"> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> @@ -94,9 +97,8 @@ </select> <br /> <br /> - <br /> - <label for="files">Select a file:</label> - <select name="files" id="files"> + <label for="disabled3">Select a file:</label> + <select name="disabled3" id="disabled3"> <optgroup disabled="disabled" label="Scripts"> <option value="jquery">jQuery.js</option> <option value="jqueryui">ui.jQuery.js</option> @@ -108,9 +110,8 @@ </select> <br /> <br /> - <br /> - <label for="files2">Select a file:</label> - <select name="files2" id="files2"> + <label for="disabled4">Select a file:</label> + <select name="disabled4" id="disabled4"> <optgroup label="Scripts"> <option value="jquery">jQuery.js</option> <option value="jqueryui">ui.jQuery.js</option> @@ -120,12 +121,44 @@ <option value="someotherfile">Some other file</option> </optgroup> </select> + <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> + <br /> + <h2>Disabled Tests</h2> + <fieldset> + <select name="speed1" class="empty"></select> + <br /> + <br /> + <select name="speed2" class="empty"> + <option value=""></option> + </select> + <br /> + <br /> + <select name="number" class="empty"> + <option value="1">1</option> + <option value="2" selected="selected">2</option> + <option value="3">3</option> + <option value="4">4</option> + <option value=""></option> + <option value="6">6</option> + <option value="7">7</option> + <option value=""></option> + <option value="9">9</option> + </select> + <br /> + <br /> + <select name="files" class="empty"> + <optgroup label="Scripts"></optgroup> + <optgroup label="Other files"> + <option value="somefile">Some unknown file</option> + <option value="someotherfile">Some other file</option> + </optgroup> + </select> </fieldset> </form> <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> </div><!-- End demo --> diff --git a/tests/visual/selectmenu/empty.html b/tests/visual/selectmenu/empty.html deleted file mode 100644 index 4a4d1ab68..000000000 --- a/tests/visual/selectmenu/empty.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Selectmenu - Methids functionality</title> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.3.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.menu.js"></script> - <script src="../../../ui/jquery.ui.selectmenu.js"></script> - <link rel="stylesheet" href="../../../demos/demos.css"> - <script> - $(function() { - $('select').selectmenu(); - }); - </script> - <style> - form { margin: 20px 0 0 0 } - fieldset { border: 0; } - label { display: block; } - select { width: 200px; } - </style> -</head> -<body> - -<div class="demo"> - -<form action="#"> - <fieldset> - <label for="speed1">Select a speed:</label> - <select name="speed1" id="speed1"></select> - - <label for="speed2">Select a speed:</label> - <select name="speed2" id="speed2"> - <option value=""></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 value="4">4</option> - <option value=""></option> - <option value="6">6</option> - <option value="7">7</option> - <option value=""></option> - <option value="9">9</option> - </select> - <br /> - <br /> - <br /> - <label for="files">Select a file:</label> - <select name="files" id="files"> - <optgroup label="Scripts"></optgroup> - <optgroup label="Other files"> - <option value="somefile">Some unknown file</option> - <option value="someotherfile">Some other file</option> - </optgroup> - </select> - </fieldset> -</form> - -</div><!-- End demo --> - - - -</body> -</html> diff --git a/tests/visual/selectmenu/events.html b/tests/visual/selectmenu/events.html deleted file mode 100644 index 54bd91d8e..000000000 --- a/tests/visual/selectmenu/events.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Selectmenu - Events functionality</title> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.3.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.menu.js"></script> - <script src="../../../ui/jquery.ui.selectmenu.js"></script> - <link rel="stylesheet" href="../../../demos/demos.css"> - <script> - $(function() { - var log = $("#log"); - var index = 0; - $('select').selectmenu({ - open: function(event, ui) { - $("<div/>").text( index++ + " Opened").prependTo(log); - }, - close: function(event, ui) { - $("<div/>").text( index++ + " Closed").prependTo(log); - }, - focus : function(event, ui) { - $("<div/>").text( index++ + " Focused: " + ui.item.label + " #" + ui.item.index ).prependTo(log); - }, - select: function(event, ui) { - $("<div/>").text( index++ + " Selected: " + ui.item.label + " #" + ui.item.index ).prependTo(log); - }, - change: function(event, ui) { - $("<div/>").text( index++ + " Changed to: " + ui.item.label + " #" + ui.item.index ).prependTo(log); - } - }); - }); - </script> - <style> - form { margin: 20px 0 0 0 } - fieldset { border: 0; } - label { display: block; } - select { width: 200px; } - .overflow ul { height: 200px; } - </style> -</head> -<body> - -<div class="demo"> - - -<div class="ui-widget" style="float: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 270px; overflow: auto;" class="ui-widget-content"></div> -</div> - -<form action="#"> - <fieldset> - <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> - <option value="Fast">Fast</option> - <option value="Faster">Faster</option> - </select> - </fieldset> -</form> - -</div><!-- End demo --> - - - -</body> -</html> diff --git a/tests/visual/selectmenu/events_methods.html b/tests/visual/selectmenu/events_methods.html new file mode 100644 index 000000000..2829337b4 --- /dev/null +++ b/tests/visual/selectmenu/events_methods.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectmenu - Events & methods functionality</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.menu.js"></script> + <script src="../../../ui/jquery.ui.selectmenu.js"></script> + <link rel="stylesheet" href="../../../demos/demos.css"> + <script> + $(function() { + var log = $("#log"), + index = 0; + + var mySelectmenu = $('select').selectmenu({ + open: function(event, ui) { + $("<div/>").text( index++ + " Opened").prependTo(log); + }, + close: function(event, ui) { + $("<div/>").text( index++ + " Closed").prependTo(log); + }, + focus : function(event, ui) { + $("<div/>").text( index++ + " Focused: " + ui.item.label + " #" + ui.item.index ).prependTo(log); + }, + select: function(event, ui) { + $("<div/>").text( index++ + " Selected: " + ui.item.label + " #" + ui.item.index ).prependTo(log); + }, + change: function(event, ui) { + $("<div/>").text( index++ + " Changed to: " + ui.item.label + " #" + ui.item.index ).prependTo(log); + } + }); + $('select').show(); + + $("#destroy").click( function() { + mySelectmenu.selectmenu("destroy"); + return false; + }); + + $("#refresh_add").click( function() { + mySelectmenu.append('<option value="fastsound">Faster than sound</option>'); + mySelectmenu.selectmenu("refresh"); + return false; + }); + + $("#refresh_selected").click( function() { + mySelectmenu[0].selectedIndex = 0; + mySelectmenu.selectmenu("refresh"); + return false; + }); + + $("#refresh").click( function() { + mySelectmenu.selectmenu("refresh"); + return false; + }); + + $("#open").click( function() { + mySelectmenu.selectmenu("open"); + return false; + }); + + $("#close").click( function() { + mySelectmenu.selectmenu("close"); + return false; + }); + }); + </script> + <style> + form { margin: 20px 0 0 0 } + fieldset { border: 0; } + label { display: block; } + select { width: 200px; } + + #log { height: 400px; width: 270px; overflow: auto; } + #control { margin-left: 300px; } + #control fieldset { border: 0; width: 270px; } + #control button { display: block; } + </style> +</head> +<body> + +<div class="demo"> + + +<div style="float: left;"> + Log: + <div id="log" class="ui-widget-content"></div> +</div> + +<div id="control"> + <form action="#"> + <fieldset> + <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> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> + </fieldset> + <button id="destroy">Destroy</button> + <button id="refresh_add">Add item</button> + <button id="refresh">Refresh</button> + <button id="refresh_selected">Change to first item</button> + <button id="open">Open</button> + <button id="close">Close</button> + </form> +</div> + +</div><!-- End demo --> + + + +</body> +</html> diff --git a/tests/visual/selectmenu/methods.html b/tests/visual/selectmenu/methods.html deleted file mode 100644 index cd0e3fb8b..000000000 --- a/tests/visual/selectmenu/methods.html +++ /dev/null @@ -1,86 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Selectmenu - Methods functionality</title> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.3.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.menu.js"></script> - <script src="../../../ui/jquery.ui.selectmenu.js"></script> - <link rel="stylesheet" href="../../../demos/demos.css"> - <script> - $(function() { - var mySelectmenu = $('select').selectmenu(); - - $('select').show(); - - $("#destroy").click( function() { - mySelectmenu.selectmenu("destroy"); - }); - - $("#refresh_add").click( function() { - mySelectmenu.append('<option value="fastsound">Faster than sound</option>'); - mySelectmenu.selectmenu("refresh"); - }); - - $("#refresh_selected").click( function() { - mySelectmenu[0].selectedIndex = 0; - mySelectmenu.selectmenu("refresh"); - }); - - $("#refresh").click( function() { - mySelectmenu.selectmenu("refresh"); - return false; - }); - - $("#open").click( function() { - mySelectmenu.selectmenu("open"); - return false; - }); - - $("#close").click( function() { - mySelectmenu.selectmenu("close"); - return false; - }); - }); - </script> - <style> - form { margin: 20px 0 0 0 } - fieldset { border: 0; } - label { display: block; } - select { width: 200px; } - </style> -</head> -<body> - -<div class="demo"> - -<form action="#"> - <fieldset> - <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> - <option value="Fast">Fast</option> - <option value="Faster">Faster</option> - </select> - </fieldset> -</form> -<br /> -<button id="destroy">Destroy</button> -<button id="refresh_add">Add item</button> -<button id="refresh">Refresh</button> -<button id="refresh_selected">Change to first item</button> -<button id="open">Open</button> -<button id="close">Close</button> - -</div><!-- End demo --> - - - -</body> -</html> |