Permalink
Browse files

most tests are more aptly named demos

  • Loading branch information...
1 parent a8a49a6 commit e041352c893804f98aef84ce768c653de978bfaa @ehynds ehynds committed Apr 27, 2010
View
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>jQuery MultiSelect Widget Demo</title>
+<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
+<link rel="stylesheet" type="text/css" href="style.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
+<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
+<script type="text/javascript">
+$(function(){
+
+ $("#test-1").multiselect({
+ show:["bounce", 200],
+ hide:["explode", 1000]
+ });
+
+ $("#test-2").multiselect({
+ show: "bounce",
+ hide: "explode"
+ });
+
+});
+</script>
+</head>
+<body>
+
+<h1>Show/hide with Animation</h1>
+<p>Using animations with the show and hide parameters.</p>
+
+<h2>Specifying different show and hide speeds</h2>
+<p>Show is 200ms, hide is 1000ms.</p>
+
+<select id="test-1" multiple="multiple" size="5">
+<option value="option1">Option 1</option>
+<option value="option2">Option 2</option>
+<option value="option3">Option 3</option>
+<option value="option4">Option 4</option>
+<option value="option5">Option 5</option>
+</select>
+
+<h2>Specifying an effect name only</h2>
+<p>Passing just the name of an effect to show/hide, triggering the default animation speed fo 400ms.</p>
+
+<select id="test-2" multiple="multiple" size="5">
+<option value="option1">Option 1</option>
+<option value="option2">Option 2</option>
+<option value="option3">Option 3</option>
+<option value="option4">Option 4</option>
+<option value="option5">Option 5</option>
+</select>
+
+</body>
+</html>
View
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>jQuery MultiSelect Widget Demo</title>
+<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
+<link rel="stylesheet" type="text/css" href="style.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
+<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
+<script type="text/javascript">
+$(function(){
+
+ var $callback = $("#callback");
+
+ $("select").multiselect({
+ check: function(){
+ $callback.html(this.value + ' ' + (this.checked ? 'checked' : 'unchecked') );
+ },
+ open: function(){
+ $callback.html("Select opened!");
+ },
+ close: function(){
+ $callback.html("Select closed!");
+ },
+ checkAll: function(){
+ $callback.html("Check all clicked!");
+ },
+ uncheckAll: function(){
+ $callback.html("Uncheck all clicked!");
+ },
+ optgroupToggle: function(checkboxes){
+ var checked = $(checkboxes).is(":checked");
+ var values = [];
+
+ $.each(checkboxes, function(i,box){
+ values[i] = box.value;
+ });
+
+ $callback.html("Checkboxes " + (checked ? "checked" : "unchecked") + ": " + values.join(', ') );
+ }
+ });
+
+});
+</script>
+</head>
+<body>
+
+<h1>Callbacks</h1>
+<p>Demonstrating onOpen, onClose, onCheck, onCheckAll, onUncheckAll, and onOptgroupToggle callbacks</p>
+
+<p class="message success" id="callback">Callback target</p>
+
+<select multiple="multiple" size="5">
+<optgroup label="Group One">
+ <option value="option1">Option 1</option>
+ <option value="option2">Option 2</option>
+ <option value="option3">Option 3</option>
+</optgroup>
+<optgroup label="Group Two">
+ <option value="option4">Option 4</option>
+ <option value="option5">Option 5</option>
+ <option value="option6">Option 6</option>
+ <option value="option7">Option 7</option>
+</optgroup>
+</select>
+
+
+</body>
+</html>
@@ -1,14 +1,14 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>jQuery MultiSelect Plugin Tests</title>
-<link rel="stylesheet" type="text/css" href="../../jquery.multiselect.css" />
+<title>jQuery MultiSelect Widget Demo</title>
+<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
-<script type="text/javascript" src="../../src/jquery.multiselect.js"></script>
+<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
@@ -23,7 +23,7 @@
</head>
<body>
-<h1>Widget Enable/Disable Tests</h1>
+<h1>Widget Enable/Disable</h1>
<p>Calling <code>multiselect("disable")</code> and <code>multiselect("enable")</code>.</p>
<select name="example-disabled" disabled="disabled" multiple="multiple" size="5">
@@ -36,6 +36,5 @@
<div><button type="button" name="toggle" id="toggle-disabled">Toggle Disabled</button></div>
-
</body>
</html>
@@ -1,15 +1,14 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>jQuery MultiSelect Plugin Tests</title>
-<link rel="stylesheet" type="text/css" href="../../jquery.multiselect.css" />
+<title>jQuery MultiSelect Widget Demo</title>
+<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
-<script type="text/javascript" src="../../src/jquery.multiselect.js"></script>
-
+<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
@@ -34,8 +33,8 @@
</head>
<body>
-<h1>Headers Test</h1>
-<p>Testing the various ways the header option can be used.</p>
+<h1>Headers</h1>
+<p>The header option can be used in three ways:</p>
<form>
<h2><code>header: true</code> (default)</h2>
@@ -1,15 +1,14 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>jQuery MultiSelect Plugin Tests</title>
-<link rel="stylesheet" type="text/css" href="../../jquery.multiselect.css" />
+<title>jQuery MultiSelect Plugin Demo</title>
+<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
-<script type="text/javascript" src="../../src/jquery.multiselect.js"></script>
-
+<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
var warning = $(".message");
View
@@ -0,0 +1,16 @@
+body { font:12px Helvetica, arial, sans-serif }
+h1, h2, p { margin:10px 0 }
+.hidden { visibility:hidden }
+
+
+.message { padding:10px; margin:15px 0; display:block; text-align:left }
+.message-title { font-weight:bold; font-size:1.25em }
+.message-body { margin-top:4px }
+.error, .notice, .success { padding:.8em; margin-bottom:1em; border:2px solid #ddd }
+.error { background:#FBE3E4; color:#8a1f11; border-color:#FBC2C4 }
+.notice { background:#FFF6BF; color:#514721; border-color:#FFD324 }
+.success { background:#E6EFC2; color:#264409; border-color:#C6D880 }
+.error a { color:#8a1f11 }
+.notice a { color:#514721 }
+.success a { color:#264409 }
+
View
@@ -87,7 +87,6 @@
selectedText: function(numChecked,numInputs,input){
return $(input).attr("title") + " selected";
}
-
});
$("form").submit(function(e){
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Plugin Tests</title>

0 comments on commit e041352

Please sign in to comment.