r1137 - trunk/tests/visual
Author: rdworth
Date: Sat Dec 13 01:53:02 2008
New Revision: 1137
Modified:
trunk/tests/visual/accordion.html
trunk/tests/visual/all.css
trunk/tests/visual/all.html
trunk/tests/visual/datepicker.html
trunk/tests/visual/dialog.html
trunk/tests/visual/draggable.handle.html
trunk/tests/visual/draggable.html
trunk/tests/visual/draggable.scroll.html
trunk/tests/visual/droppable.html
trunk/tests/visual/effects.all.css
trunk/tests/visual/effects.all.html
trunk/tests/visual/effects.all.js
trunk/tests/visual/progressbar.html
trunk/tests/visual/resizable.html
trunk/tests/visual/selectable.html
trunk/tests/visual/slider.html
trunk/tests/visual/sortable.html
trunk/tests/visual/sortable_massive_scale.html
Log:
tests/visual: started switching to themes/base. Lots of little cleanup.
Modified: trunk/tests/visual/accordion.html
==============================================================================
--- trunk/tests/visual/accordion.html (original)
+++ trunk/tests/visual/accordion.html Sat Dec 13 01:53:02 2008
@@ -2,54 +2,53 @@
<html lang="en">
<head>
<title>jQuery UI Accordion Visual Test</title>
-
- <link rel="stylesheet" href="../../themes/base/ui.core.css"
type="text/css">
- <link rel="stylesheet" href="../../themes/base/ui.theme.css"
type="text/css">
- <link rel="stylesheet" href="../../themes/base/ui.accordion.css"
type="text/css">
-
+ <link rel="stylesheet" href="all.css" type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
-
<script type="text/javascript">
$(function() {
- function enable() {
- $("#myAccordion").accordion({
+ function on() {
+ $("#accordion").accordion({
header: "h3"
});
}
- function disable() {
- $("#myAccordion").accordion("destroy");
+ function off() {
+ $("#accordion").accordion("destroy");
}
- $("#toggle").toggle(enable, disable);
- //enable();
+ $("#toggle").toggle(on, off).click();
})
</script>
</head>
-<body style="font-size: 62.5%;">
-
- <div id="myAccordion">
- <div>
- <h3><a href="#">Test 1</a></h3>
- <div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- </div>
- </div>
- <div>
- <h3><a href="#">Test 2</a></h3>
- <div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- </div>
- </div>
- <div>
- <h3><a href="#">Test 3</a></h3>
- <div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- </div>
- </div>
- </div>
+<body>
+<ul class="plugins">
+<li>
+ Accordion
+ <div id="accordion">
+ <div>
+ <h3><a href="#">Test 1</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 2</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 3</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ </div>
<button id="toggle">Toggle</button>
+</li>
+</ul>
</body>
</html>
Modified: trunk/tests/visual/all.css
==============================================================================
--- trunk/tests/visual/all.css (original)
+++ trunk/tests/visual/all.css Sat Dec 13 01:53:02 2008
@@ -1,5 +1,5 @@
-body { margin: 0; padding: 20px; background: #191919; }
+body { font-size: 62.5%; margin: 0; padding: 20px; background: #191919; }
ul.plugins { margin: 0; padding: 0; }
ul.plugins li { margin: 0 12px 12px 0;
list-style-type: none; width: 210px; height: 220px; float: left;
@@ -10,7 +10,13 @@
margin: 10px;
width: 190px; height: 180px;
text-align: center;
- background: #FEA620; color: white; font-weight: bold;
+ background: #FF9C08; color: white; font-weight: bold;
+}
+#accordion {
+ background: none;
+}
+#progressbar {
+ margin: 10px;
}
#selectable div {
width: 45px; height: 45px; float: left; margin: 6px;
@@ -30,51 +36,6 @@
background: black;
}
-.draggable { margin: 10px; width: 32px; height: 30px; float: left;
background: #FEA620; }
-#droppable { margin: 10px; width: 190px; height: 130px; float: left;
border: 1px solid #FEA620; overflow: hidden; }
+.draggable { margin: 10px; width: 32px; height: 30px; float: left;
background: #FF9C08; }
+#droppable { margin: 10px; width: 190px; height: 130px; float: left;
border: 1px solid #FF9C08; overflow: hidden; }
#droppable .draggable { margin: 7px; }
-
-.ui-dialog { background-color: #FEA620; }
-.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height:
28px; _height: 29px; }
-.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }
-
-.ui-dialog .ui-dialog-titlebar-close {
- width: 16px; height: 16px; position: absolute; top: 6px; right: 7px;
- cursor: default; color: white;
-}
-
-.ui-dialog .ui-dialog-titlebar-close-hover { color: #FEA620; }
-
-.ui-dialog .ui-dialog-title {
- margin-left: 5px; color: white; font-weight: bold;
- position: relative; top: 7px; left: 4px;
-}
-
-.ui-dialog .ui-dialog-content {
- margin: 1.2em;
-}
-
-.ui-dialog .ui-dialog-buttonpane {
- position: absolute;
- bottom: 8px;
- right: 12px;
- width: 100%;
- text-align: right;
-}
-
-.ui-dialog .ui-dialog-buttonpane button {
- margin: 6px;
-}
-
-/* Dialog handle styles */
-.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%;
top: 0px; left: 0px; background: gray !important; border: none !important; }
-.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%;
bottom: 0px; left: 0px; background: gray !important; border:
none !important; }
-.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px;
top: 0px; height: 100%; background: gray !important; border:
none !important; }
-.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top:
0px; height: 100%; background: gray !important; border: none !important; }
-.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px;
right: 0px; bottom: 0px; background: gray !important; border:
none !important; }
-.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px;
left: 0px; bottom: 0px; background: gray !important; border:
none !important; }
-.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px;
left: 0px; top: 0px; background: gray !important; border: none !important; }
-.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px;
right: 0px; top: 0px; background: gray !important; border: none !important;
}
-
-.ui-slider { margin: 10px; background: #FEA620; height: 15px; position:
relative; }
-.ui-slider-handle { width: 10px; height: 15px; background: white;
position: absolute; top: 0px; left: 0px; }
Modified: trunk/tests/visual/all.html
==============================================================================
--- trunk/tests/visual/all.html (original)
+++ trunk/tests/visual/all.html Sat Dec 13 01:53:02 2008
@@ -3,7 +3,7 @@
<head>
<title>Simple All</title>
<link rel="stylesheet" href="all.css" type="text/css">
- <link rel="stylesheet" href="../../themes/ui.datepicker.css"
type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
@@ -11,6 +11,7 @@
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
@@ -18,8 +19,9 @@
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
+ $("#accordion").accordion();
$("#datepicker").datepicker();
- $("#dialog").click(function() { $("<div/>").dialog(); });
+ $("#dialog").click(function() { $("<div></div>").dialog(); });
$("#draggable").draggable();
$(".draggable").draggable();
$("#droppable").droppable({
@@ -28,6 +30,7 @@
ui.draggable.css({ position: 'relative', top: 0, left: 0
}).clone().appendTo(this);
}
});
+ $("#progressbar").progressbar({ value: 37 });
$("#resizable").resizable();
$("#selectable").selectable();
$("#slider").slider();
@@ -39,6 +42,29 @@
<ul class="plugins">
<li>
+ Accordion
+ <div id="accordion">
+ <div>
+ <h3><a href="#">Test 1</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 2</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 3</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ </div>
+</li>
+<li>
Datepicker
<div style="text-align:left;margin-left:10px;">
<input type="text" id="datepicker">
@@ -64,6 +90,10 @@
DROP
<hr>
</div>
+</li>
+<li>
+ Progressbar
+ <div id="progressbar"></div>
</li>
<li>
Resizable
Modified: trunk/tests/visual/datepicker.html
==============================================================================
--- trunk/tests/visual/datepicker.html (original)
+++ trunk/tests/visual/datepicker.html Sat Dec 13 01:53:02 2008
@@ -3,7 +3,7 @@
<head>
<title>Simple Datepicker</title>
<link rel="stylesheet" href="all.css" type="text/css">
- <link rel="stylesheet" href="../../themes/ui.datepicker.css"
type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
Modified: trunk/tests/visual/dialog.html
==============================================================================
--- trunk/tests/visual/dialog.html (original)
+++ trunk/tests/visual/dialog.html Sat Dec 13 01:53:02 2008
@@ -12,7 +12,7 @@
<script type="text/javascript">
$(function() {
$("#dialog").click(function() {
- $("<div/>").dialog();
+ $("<div></div>").dialog();
});
});
</script>
Modified: trunk/tests/visual/draggable.handle.html
==============================================================================
--- trunk/tests/visual/draggable.handle.html (original)
+++ trunk/tests/visual/draggable.handle.html Sat Dec 13 01:53:02 2008
@@ -1,14 +1,17 @@
<!doctype html>
<html lang="en">
<head>
- <title>Simple Draggable</title>
+ <title>Simple Draggable with Handle</title>
<link rel="stylesheet" href="all.css" type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
- $("#draggable").draggable({ handle: "span" });
+ $("#draggable").draggable({
+ handle: "span"
+ });
});
</script>
</head>
Modified: trunk/tests/visual/draggable.html
==============================================================================
--- trunk/tests/visual/draggable.html (original)
+++ trunk/tests/visual/draggable.html Sat Dec 13 01:53:02 2008
@@ -3,6 +3,7 @@
<head>
<title>Simple Draggable</title>
<link rel="stylesheet" href="all.css" type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
Modified: trunk/tests/visual/draggable.scroll.html
==============================================================================
--- trunk/tests/visual/draggable.scroll.html (original)
+++ trunk/tests/visual/draggable.scroll.html Sat Dec 13 01:53:02 2008
@@ -1,50 +1,38 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
+<!doctype html>
+<html lang="en">
<head>
-<script src="../../jquery-1.2.6.js" type="text/javascript"
charset="utf-8"></script>
-<script src="../../ui/ui.core.js" type="text/javascript"
charset="utf-8"></script>
-<script src="../../ui/ui.draggable.js" type="text/javascript"
charset="utf-8"></script>
-<script src="../../ui/ui.sortable.js" type="text/javascript"
charset="utf-8"></script>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-<title>jQuery UI Draggable Visual Test</title>
-</head>
-
-<body>
-
-<style>
-
- .draggable {
- width:100px;
- height:100px;
- background-color:green;
- color: #fff;
- padding: 5px;
- margin: 5px;
- border: 5px solid red;
- }
-
- .container {
- width: 500px;
- height: 200px;
- border: 5px solid black;
- padding: 5px;
- margin: 5px;
- float: left;
- background: #fff;
- }
-
- .enlarge {
- width: 1000px;
- height: 1000px;
- }
-
-
-</style>
-
-
-
-<script language="JavaScript">
-<!--
+ <title>Draggable Scroll Tests</title>
+ <link rel="stylesheet" href="all.css" type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ .draggable {
+ width:100px;
+ height:100px;
+ background-color:green;
+ color: #fff;
+ padding: 5px;
+ margin: 5px;
+ border: 5px solid red;
+ }
+ .container {
+ width: 500px;
+ height: 200px;
+ border: 5px solid black;
+ padding: 5px;
+ margin: 5px;
+ float: left;
+ background: #fff;
+ }
+ .enlarge {
+ width: 1000px;
+ height: 1000px;
+ }
+ </style>
+ <script type="text/javascript">
$(function(){
$(".draggable").draggable({
//helper: 'clone',
@@ -55,10 +43,9 @@
//containment:"parent"
});
});
-//-->
-</script>
-
-
+ </script>
+</head>
+<body>
<div class='container' style="overflow:scroll;">
<div class='draggable'>(Broken in IE)</div>
Modified: trunk/tests/visual/droppable.html
==============================================================================
--- trunk/tests/visual/droppable.html (original)
+++ trunk/tests/visual/droppable.html Sat Dec 13 01:53:02 2008
@@ -3,6 +3,7 @@
<head>
<title>Simple Droppable</title>
<link rel="stylesheet" href="all.css" type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
Modified: trunk/tests/visual/effects.all.css
==============================================================================
--- trunk/tests/visual/effects.all.css (original)
+++ trunk/tests/visual/effects.all.css Sat Dec 13 01:53:02 2008
@@ -1,3 +1,4 @@
+
body,html {
margin: 0;
padding: 0;
@@ -32,8 +33,8 @@
}
div.current {
- border: 5px outset #FF0000;
- background: #660000;
+ border: 5px outset #FF9C08;
+ background: #FF9C08;
}
div.effect p {
@@ -46,4 +47,4 @@
border: 1px dotted #fff;
background: #666;
opacity: 0.5;
-}
\ No newline at end of file
+}
Modified: trunk/tests/visual/effects.all.html
==============================================================================
--- trunk/tests/visual/effects.all.html (original)
+++ trunk/tests/visual/effects.all.html Sat Dec 13 01:53:02 2008
@@ -1,13 +1,10 @@
<!doctype html>
<html lang="en">
<head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css"
charset="utf-8" />
-
+ <title>jQuery UI Effects Test Suite</title>
+ <link rel="stylesheet" href="effects.all.css" type="text/css" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>
-
<script type="text/javascript" src="../../ui/effects.blind.js"></script>
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
<script type="text/javascript" src="../../ui/effects.clip.js"></script>
@@ -20,7 +17,6 @@
<script type="text/javascript" src="../../ui/effects.shake.js"></script>
<script type="text/javascript" src="../../ui/effects.slide.js"></script>
<script type="text/javascript"
src="../../ui/effects.transfer.js"></script>
-
<script type="text/javascript" src="effects.all.js"></script>
</head>
<body>
Modified: trunk/tests/visual/effects.all.js
==============================================================================
--- trunk/tests/visual/effects.all.js (original)
+++ trunk/tests/visual/effects.all.js Sat Dec 13 01:53:02 2008
@@ -1,13 +1,9 @@
-$(document).ready(function() {
- $("div.effect")
- .hover(function() {
- $(this).addClass("hover");
- }, function() {
- $(this).removeClass("hover");
- })
- ;
+$(function() {
+ $("div.effect")
+ .hover(function() { $(this).addClass("hover"); },
+ function() { $(this).removeClass("hover"); });
var effect = function(el, n, o) {
@@ -27,7 +23,6 @@
};
-
effect("#blindHorizontally", "blind", { direction: "horizontal" });
effect("#blindVertically", "blind", { direction: "vertical" });
@@ -41,17 +36,17 @@
effect("#dropLeft", "drop", { direction: "left" });
effect("#dropRight", "drop", { direction: "right" });
- effect("#explode9", "explode", { });
+ effect("#explode9", "explode", {});
effect("#explode36", "explode", { pieces: 36 });
effect("#fold", "fold", { size: 50 });
- effect("#highlight", "highlight", { });
+ effect("#highlight", "highlight", {});
effect("#pulsate", "pulsate", { times: 2 });
effect("#puff", "puff", { times: 2 });
- effect("#scale", "scale", { });
+ effect("#scale", "scale", {});
$("#shake").bind("click", function() {
$(this).addClass("current").effect("shake", {}, 100, function() {
$(this).removeClass("current"); }); });
@@ -62,4 +57,4 @@
$("#transfer").bind("click", function() {
$(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000,
function() { $(this).removeClass("current"); }); });
-});
\ No newline at end of file
+});
Modified: trunk/tests/visual/progressbar.html
==============================================================================
--- trunk/tests/visual/progressbar.html (original)
+++ trunk/tests/visual/progressbar.html Sat Dec 13 01:53:02 2008
@@ -1,40 +1,26 @@
<!doctype html>
<html lang="en">
<head>
-<title>jQuery UI Progressbar Visual Tests</title>
-<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"
/>
-<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
-<script type="text/javascript" src="../../ui/ui.core.js"></script>
-<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
-
-<script type="text/javascript">
- $(function() {
- $("#progressbar1").progressbar({ value: 6 });
- $("#progressbar2").progressbar({ labelAlign: 'center', label: 'center'
}).progressbar("option", "value", 50);
-
$("#progressbar3").progressbar().progressbar("option", "labelAlign", "right").progressbar("value",
90.73).data("label.progressbar", "right").progressbar("option", "label",
true);
- $("#progressbar4").progressbar().progressbar("disable");
-
$("#progressbar5").progressbar().progressbar("disable").progressbar("destroy");
- $("#progressbar6").progressbar({ value: -10 });
- $("#progressbar7").progressbar().progressbar("value", 200);
- });
+ <title>Simple Progressbar</title>
+