aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2013-05-30 22:07:52 +0200
committerFelix Nagel <info@felixnagel.com>2013-05-30 22:07:52 +0200
commit33317c937221db14e670001324bfd3471717817c (patch)
tree415aadf1985b3160c10f3ce6eaf4c4a78f06e5ca /tests/visual
parent57fa48281c0e04c4696e9ad8c2d24397b55391de (diff)
downloadjquery-ui-33317c937221db14e670001324bfd3471717817c.tar.gz
jquery-ui-33317c937221db14e670001324bfd3471717817c.zip
Selectmenu tests: combine visual tests to one
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/selectmenu/events_methods.html119
-rw-r--r--tests/visual/selectmenu/selectmenu.html (renamed from tests/visual/selectmenu/disabled_empty.html)130
2 files changed, 98 insertions, 151 deletions
diff --git a/tests/visual/selectmenu/events_methods.html b/tests/visual/selectmenu/events_methods.html
deleted file mode 100644
index e4c9e3d05..000000000
--- a/tests/visual/selectmenu/events_methods.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!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.9.1.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/disabled_empty.html b/tests/visual/selectmenu/selectmenu.html
index 4bdbf7f01..d3159c743 100644
--- a/tests/visual/selectmenu/disabled_empty.html
+++ b/tests/visual/selectmenu/selectmenu.html
@@ -1,25 +1,74 @@
<!doctype html>
-<html lang="en">
+<html>
<head>
<meta charset="utf-8">
- <title>jQuery UI Selectmenu - Disabled & empty elements functionality</title>
+ <title>Selectmenu Visual Test: Default</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../../jquery-1.9.1.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,
+ text;
+
+ function logger( event, ui ) {
+ text = "#" + index++ + " " + event.type.replace("selectmenu","");
+ if ( ui.item ) {
+ text += ": " + ui.item.index + " => " + ui.item.label;
+ }
+ $( "<p>" ).text( text ).prependTo( "#log" );
+ }
+
+ /* events */
+ var eventsSelectmenu = $('#control select').selectmenu({
+ open: logger,
+ close: logger,
+ focus : logger,
+ select: logger,
+ change: logger
+ });
+ eventsSelectmenu.show();
+
+ $("#destroy").click( function() {
+ eventsSelectmenu.selectmenu("destroy");
+ return false;
+ });
+
+ $("#refresh_add").click( function() {
+ eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh_selected").click( function() {
+ eventsSelectmenu[0].selectedIndex = 0;
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh").click( function() {
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#open").click( function() {
+ eventsSelectmenu.selectmenu("open");
+ return false;
+ });
+
+ $("#close").click( function() {
+ eventsSelectmenu.selectmenu("close");
+ return false;
+ });
+
/* disabled */
- $('select#disabled1').selectmenu();
- var withOverflow = $('select#disabled2').selectmenu();
- withOverflow.selectmenu("menuWidget").addClass("overflow");
-
- $('select#disabled3').selectmenu();
- var disabled4 = $('select#disabled4').selectmenu();
+ $('#disabled1, #disabled2, #disabled3').selectmenu();
+ var disabled4 = $('#disabled4').selectmenu();
$("#disable_select").on("click", function() {
if (disable_select) {
@@ -28,10 +77,11 @@
} else {
disable_select = true;
disabled4.removeAttr("disabled");
- }
+ }
disabled4.selectmenu("refresh");
return false;
});
+
$("#disable_option").on("click", function() {
if (disable_option) {
disable_option = false;
@@ -39,10 +89,11 @@
} else {
disable_option = true;
disabled4.find("option:eq(0)").removeAttr("disabled");
- }
+ }
disabled4.selectmenu("refresh");
return false;
});
+
$("#disable_optgroup").on("click", function() {
if (disable_optgroup) {
disable_optgroup = false;
@@ -50,7 +101,7 @@
} else {
disable_optgroup = true;
disabled4.find("optgroup:eq(0)").removeAttr("disabled");
- }
+ }
disabled4.selectmenu("refresh");
return false;
});
@@ -60,15 +111,36 @@
});
</script>
<style>
+ body { font-size:62.5%; }
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
- .overflow { height: 200px; }
+
+ .ui-selectmenu-button { display: block; margin-bottom: 1em;}
</style>
</head>
<body>
-<div class="demo">
+<div id="control">
+ <h2>Event logging tests</h2>
+ <form action="#">
+ <button id="open">Open</button>
+ <button id="close">Close</button>
+ <button id="refresh_add">Add item</button>
+ <button id="refresh_selected">Change to first item</button>
+ <button id="refresh">Refresh</button>
+ <button id="destroy">Destroy</button>
+ <fieldset>
+ <select>
+ <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>
<form action="#">
<h2>Disabled tests</h2>
@@ -81,8 +153,7 @@
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
- <br />
- <br />
+
<label for="disabled2">Disabled options</label>
<select name="disabled2" id="disabled2">
<option value="1">1</option>
@@ -105,8 +176,7 @@
<option value="18">18</option>
<option value="19">19</option>
</select>
- <br />
- <br />
+
<label for="disabled3">Disabled optgroup</label>
<select name="disabled3" id="disabled3">
<optgroup disabled="disabled" label="Scripts">
@@ -118,8 +188,7 @@
<option value="someotherfile">Some other file</option>
</optgroup>
</select>
- <br />
- <br />
+
<label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
<select name="disabled4" id="disabled4">
<optgroup label="Scripts">
@@ -135,19 +204,17 @@
<button id="disable_option">Toggle disable option</button>
<button id="disable_optgroup">Toggle disable optgroup</button>
</fieldset>
- <br />
+
<h2>Empty tests</h2>
<fieldset class="empty">
<label for="empty1">Select with no option elements</label>
<select name="empty1" id="empty1"></select>
- <br />
- <br />
+
<label for="empty2">Select with one empty option element</label>
<select name="empty2" id="empty2">
<option value=""></option>
</select>
- <br />
- <br />
+
<label for="empty3">Select with some empty option elements</label>
<select name="empty3" id="empty3">
<option value="1">1</option>
@@ -160,8 +227,7 @@
<option value=""></option>
<option value="9">9</option>
</select>
- <br />
- <br />
+
<label for="empty4">Select with empty optgroup</label>
<select name="empty4" class="empty4">
<optgroup label="Scripts"></optgroup>
@@ -172,11 +238,11 @@
</select>
</fieldset>
</form>
-<br />
-
-</div><!-- End demo -->
-
+<div style="position: absolute; top: 1em; right: 1em;">
+ Log:
+ <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
+</div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-05 15:26:26 +0000