Selectmenu: improved visual tests (title and merging widget compatibility tests)

This commit is contained in:
Felix Nagel 2011-12-01 20:09:57 +01:00
parent b539e2e5c8
commit aef2d2fc6c
6 changed files with 59 additions and 172 deletions

View File

@ -1,94 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.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.autocomplete.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();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</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 />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
</body>
</html>

View File

@ -2,21 +2,52 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<title>jQuery UI Selectmenu - Compatibility with other widgets</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.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.tabs.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script>
<script src="../../../ui/jquery.ui.autocomplete.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() {
$( "#tabs" ).tabs();
$('select').selectmenu();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
$( "#tabs" ).tabs();
$( "#dialog" ).dialog();
});
</script>
<style>
@ -24,17 +55,22 @@
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
#tabs { margin: 50px 0 0 0 }
</style>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-2">Selectmenu</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
@ -60,6 +96,23 @@
</div>
</div>
<div id="dialog" title="Basic dialog">
<p>Some example content</p>
<p><a href="#nogo">Test Link</a></p>
<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>
</div><!-- End demo -->

View File

@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.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.dialog.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();
$( "#dialog" ).dialog();
});
</script>
<style>
form { margin: 20px 0 0 0 }
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
</style>
</head>
<body>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>Some example content</p>
<p><a href="#nogo">Test Link</a></p>
<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>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
</body>
</html>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<title>jQuery UI Selectmenu - Events functionality</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.1.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<title>jQuery UI Selectmenu - Methids functionality</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.1.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Event functionality</title>
<title>jQuery UI Selectmenu - Option functionality</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.1.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>