<html lang="en">\r
<head>\r
<title>jQuery UI Accordion Visual Test</title>\r
-\r
- <link rel="stylesheet" href="../../themes/base/ui.core.css" type="text/css">\r
- <link rel="stylesheet" href="../../themes/base/ui.theme.css" type="text/css">\r
- <link rel="stylesheet" href="../../themes/base/ui.accordion.css" type="text/css">\r
-\r
+ <link rel="stylesheet" href="all.css" type="text/css">\r
+ <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">\r
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
<script type="text/javascript" src="../../ui/ui.core.js"></script>\r
<script type="text/javascript" src="../../ui/ui.accordion.js"></script>\r
-\r
<script type="text/javascript">\r
$(function() {\r
- function enable() {\r
- $("#myAccordion").accordion({\r
+ function on() {\r
+ $("#accordion").accordion({\r
header: "h3"\r
});\r
}\r
- function disable() {\r
- $("#myAccordion").accordion("destroy");\r
+ function off() {\r
+ $("#accordion").accordion("destroy");\r
}\r
- $("#toggle").toggle(enable, disable);\r
- //enable();\r
+ $("#toggle").toggle(on, off).click();\r
})\r
</script>\r
</head>\r
-<body style="font-size: 62.5%;">\r
-\r
- <div id="myAccordion">\r
- <div>\r
- <h3><a href="#">Test 1</a></h3>\r
- <div>\r
- Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
- </div>\r
- </div>\r
- <div>\r
- <h3><a href="#">Test 2</a></h3>\r
- <div>\r
- Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
- </div>\r
- </div>\r
- <div>\r
- <h3><a href="#">Test 3</a></h3>\r
- <div>\r
- Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
- </div>\r
- </div>\r
- </div>\r
+<body>\r
\r
+<ul class="plugins">\r
+<li>\r
+ Accordion\r
+ <div id="accordion">\r
+ <div>\r
+ <h3><a href="#">Test 1</a></h3>\r
+ <div>\r
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <h3><a href="#">Test 2</a></h3>\r
+ <div>\r
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <h3><a href="#">Test 3</a></h3>\r
+ <div>\r
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit\r
+ </div>\r
+ </div>\r
+ </div>\r
<button id="toggle">Toggle</button>\r
+</li>\r
+</ul>\r
\r
</body>\r
</html>\r
-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;
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;
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; }
<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>
<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>
<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({
ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
}
});
+ $("#progressbar").progressbar({ value: 37 });
$("#resizable").resizable();
$("#selectable").selectable();
$("#slider").slider();
<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>
+</li>
<li>
Datepicker
<div style="text-align:left;margin-left:10px;">
<hr>
</div>
</li>
+<li>
+ Progressbar
+ <div id="progressbar"></div>
+</li>
<li>
Resizable
<div id="resizable"></div>
<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>
<script type="text/javascript">
$(function() {
$("#dialog").click(function() {
- $("<div/>").dialog();
+ $("<div></div>").dialog();
});
});
</script>
<!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>
<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>
-<!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',
//containment:"parent"
});
});
-//-->
-</script>
-
-
+ </script>
+</head>
+<body>
<div class='container' style="overflow:scroll;">
<div class='draggable'>(Broken in IE)</div>
<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>
+
body,html {
margin: 0;
padding: 0;
}
div.current {
- border: 5px outset #FF0000;
- background: #660000;
+ border: 5px outset #FF9C08;
+ background: #FF9C08;
}
div.effect p {
border: 1px dotted #fff;
background: #666;
opacity: 0.5;
-}
\ No newline at end of file
+}
<!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>
<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>
-$(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) {
};
-
effect("#blindHorizontally", "blind", { direction: "horizontal" });
effect("#blindVertically", "blind", { direction: "vertical" });
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"); }); });
$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
-});
\ No newline at end of file
+});
<!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>
+ <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.progressbar.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#progressbar").progressbar({ value: 37 });
+ });
</script>
</head>
<body>
-<h1>jQuery UI Progressbar Visual Tests</h1>
- <div id="progressbar1"></div>
- <br>
- <div id="progressbar2"></div>
- <br>
- <div id="progressbar3"></div>
- <br>
- <div id="progressbar4"></div>
- <br>
- <div id="progressbar5"></div>
- <br>
- <div id="progressbar6"></div>
- <br>
- <div id="progressbar7"></div>
+<ul class="plugins">
+<li>
+ Progressbar
+ <div id="progressbar"></div>
+</li>
+</ul>
</body>
</html>
<head>
<title>Simple Resizable</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.resizable.js"></script>
});
</script>
</head>
-
<body>
<ul class="plugins">
<head>
<title>Simple Selectable</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.selectable.js"></script>
<head>
<title>Simple Slider</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.slider.js"></script>
<head>
<title>Simple Sortable</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.sortable.js"></script>
<!doctype html>
<html lang="en">
<head>
- <title>Sortable Visual Test</title>
+ <title>Sortable Massive Scale Test</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.sortable.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
-
- <script type="text/javascript">
-
-
-
- $(document).ready( function() {
- $('ul').not(".draggable").sortable({ items: "li" });
- $("ul.draggable li").draggable({ helper: "clone", connectToSortable: "ul" });
- });
- </script>
<style>
ul {
list-style: none;
margin: 5px;
}
</style>
+ <script type="text/javascript">
+ $(function() {
+ $('ul').not(".draggable").sortable({ items: "li" });
+ $("ul.draggable li").draggable({ helper: "clone", connectToSortable: "ul" });
+ });
+ </script>
</head>
<body>
<li>Item 19</li>
<li>Item 20</li>
</ul>
+
</body>
-</html>
\ No newline at end of file
+</html>
projects / jquery-ui.git / commitdiff