aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
authorPaul Bakaus <paul.bakaus@googlemail.com>2008-07-09 11:09:40 +0000
committerPaul Bakaus <paul.bakaus@googlemail.com>2008-07-09 11:09:40 +0000
commit4e06fa6304c30dd3bfcfa818a84d7fb7e92eea33 (patch)
tree5888f3d7764c70a327153e647f18fc0b160f9179 /tests/visual
parentcf48fc7ee4fad5a641d675265afbe4573f55fb72 (diff)
downloadjquery-ui-4e06fa6304c30dd3bfcfa818a84d7fb7e92eea33.tar.gz
jquery-ui-4e06fa6304c30dd3bfcfa818a84d7fb7e92eea33.zip
- removed 1.6 branch1.5.2
- changed version in tags/1.5.2 to 1.5.2 - merged trunk with 1.6
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/magnifier.html108
-rw-r--r--tests/visual/progressbar.html256
-rw-r--r--tests/visual/spinner.html45
-rw-r--r--tests/visual/tree.html130
4 files changed, 539 insertions, 0 deletions
diff --git a/tests/visual/magnifier.html b/tests/visual/magnifier.html
new file mode 100644
index 000000000..70ca26799
--- /dev/null
+++ b/tests/visual/magnifier.html
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Language" content="en" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Magnifier Demo</title>
+
+<style type="text/css">
+
+body,html {
+ margin: 0;
+ padding: 0;
+ font-family: Arial;
+ font-size: 12px;
+}
+
+div.playground {
+ height: 150px;
+}
+
+#example1 img,
+#example2 img,
+#example3 img,
+#example4 img {
+ float:left;
+}
+
+</style>
+<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.magnifier.js"></script>
+
+
+</head>
+<body>
+
+<h2>1. Default, no options</h2>
+<div class="playground">
+ <div id='example1' class="ui-wrapper example" style="width: 580px; padding: 20px;">
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ </div>
+</div>
+
+<h2>2. Magnification set to 1.5 (default: 2)</h2>
+<div class="playground">
+ <div id='example2' class="ui-wrapper example" style="width: 580px; padding: 20px;">
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ </div>
+</div>
+
+<h2>3. Advanced example: overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1</h2>
+<div class="playground">
+ <div id='example3' class="ui-wrapper example" style="width: 580px; padding: 20px;">
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ </div>
+</div>
+
+<h2>4. Advanced example: The direction doesn't have to be horizontal!</h2>
+<div class="playground">
+ <div id='example4' class="ui-wrapper example" style="width: 150px; padding: 20px; height: 150px;">
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ <img src="../images/clock.png" width="48" alt="" />
+ </div>
+</div>
+
+<script type="text/javascript">
+if(!window.console) {
+ window.console = {
+ log: function() {
+ alert(arguments[0]);
+ }
+ }
+}
+
+$(window).bind("load",function(){
+
+ $('#example1').magnifier();
+ $('#example2').magnifier({ magnification: 1.5 });
+ $('#example3').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1 });
+ $('#example4').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, distance: 30 });
+
+});
+</script>
+</body>
+</html>
diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html
new file mode 100644
index 000000000..f2cc46aad
--- /dev/null
+++ b/tests/visual/progressbar.html
@@ -0,0 +1,256 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Language" content="en" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>ProgressBar Test Page</title>
+<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 type="text/javascript" src="../../ui/ui.draggable.js"></script>
+<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
+
+<style type="text/css" media="all">
+
+body
+{
+ background: #fff;
+ font-family: Arial;
+}
+
+#log {
+ right:0px;
+ top:0px;
+ background-color:#FAFCFE;
+ border:1px solid #DFE8F6;
+ height:400px;
+ width:300px;
+ position:absolute;
+ overflow:auto;
+}
+
+/* ProgressBar */
+
+.ui-progressbar {
+ width: 400px; height: 20px;
+ border: 1px #ccc solid;
+ background:#E0E8F3 url(../images/bg.gif) repeat-x scroll 0%;
+ position:relative;
+}
+
+.ui-progressbar-wrap {
+ position: relative;
+ height: auto;
+ width: auto;
+ line-height: 18px;
+ _line-height: 16px;
+}
+
+.ui-progressbar-bar {
+ background:#9CBFEE url(../images/progress-bg.gif) repeat-x scroll left center;
+ border-bottom:1px solid #7FA9E4;
+ border-right:1px solid #7FA9E4;
+ border-top:1px solid #D1E4FD;
+ position: absolute;
+}
+
+.ui-progressbar-text {
+ color:#fff;
+ overflow: hidden;
+ white-space: nowrap;
+ font-size: 11px;
+ font-weight: bold;
+ padding-left: 5px;
+}
+
+.ui-progressbar-text-back {
+ color:#000;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-right: 1px;
+}
+
+.ui-progressbar-disabled {
+ opacity:.5;
+ filter:Alpha(Opacity=50);
+}
+
+
+/* custom */
+.ui-progressbar-text.right-align {
+ text-align: right;
+ padding: 0 5px 0 0;
+}
+.ui-progressbar-inner-custom {
+ background: url(../images/custom-bar.gif) repeat-x scroll left center;
+ border-bottom:1px solid #EFEFEF;
+ border-right:0pt none;
+ border-top:1px solid #BEBEBE;
+ height:15px;
+}
+
+.ui-hidden {
+ left:-10000px;
+ position:absolute;
+ top:-10000px;
+ visibility:hidden;
+}
+
+</style>
+</head>
+<body >
+
+<h1>jQuery - ProgressBar</h1>
+
+<div id="log">log</div>
+
+
+<div id='p1'></div><br>
+
+<button id="p1-create">Create</button>
+<button id="p1-destroy" onclick="$('#p1').progressbar('destroy');">destroy</button>
+<button id="p1-start" onclick="$('#p1').progressbar('start');">Start</button>
+<button id="p1-stop" onclick="$('#p1').progressbar('stop');">Stop</button>
+<button id="p1-pause" onclick="$('#p1').progressbar('reset');">reset</button>
+<button id="p1-enable" onclick="$('#p1').progressbar('enable');">enable</button>
+<button id="p1-disable" onclick="$('#p1').progressbar('disable');">disable</button>
+<button id="p1-progress" onclick="$('#p1').progressbar('progress', 50);">progress to 50</button>
+<button id="p1-progress" onclick="$('#p1').progressbar('text', 'Textchanged!');">Change text</button>
+
+<br><br>
+
+<div id='p2'></div><br>
+
+<button id="p2-create">Create</button>
+<button id="p2-destroy" onclick="$('#p2').progressbar('destroy');">destroy</button>
+<button id="p2-start" onclick="$('#p2').progressbar('start');">Start</button>
+<button id="p2-stop" onclick="$('#p2').progressbar('stop');">Stop</button>
+<button id="p2-pause" onclick="$('#p2').progressbar('reset');">reset</button>
+<button id="p2-enable" onclick="$('#p2').progressbar('enable');">enable</button>
+<button id="p2-disable" onclick="$('#p2').progressbar('disable');">disable</button>
+<button id="p2-progress" onclick="$('#p2').progressbar('progress', 40);">progress to 50</button>
+
+<br><br>
+
+<div id='p3'></div><br>
+
+<button id="p3-create">Create</button>
+<button id="p3-destroy" onclick="$('#p3').progressbar('destroy');">destroy</button>
+<button id="p3-start" onclick="$('#p3').progressbar('start');">Start</button>
+<button id="p3-stop" onclick="$('#p3').progressbar('stop');">Stop</button>
+<button id="p3-pause" onclick="$('#p3').progressbar('reset');">reset</button>
+<button id="p3-enable" onclick="$('#p3').progressbar('enable');">enable</button>
+<button id="p3-disable" onclick="$('#p3').progressbar('disable');">disable</button>
+<button id="p3-progress" onclick="$('#p3').progressbar('progress', $('#p3-value').val());">progress to</button>
+<input type="text" id="p3-value" value="35"/>
+
+<br><br>
+
+<button id="p2-startall" onclick="$('#p2, #p1, #p3').progressbar('start');">Start All</button>
+<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('stop');">Stop All</button>
+<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('reset');">Reset All</button>
+
+<script>
+
+$(function() {
+
+ $('#p1-create').click(function() {
+
+ $('#p1').progressbar({
+
+ text: 'jQuery ProgressBar waiting...',
+
+ //addClass: 'ui-progressbar-inner-custom teste',
+
+ //textClass: 'right-align',
+
+ //align: 'right',
+
+ wait: 'loop',
+
+ duration: 2000,
+
+ stepping: 3,
+
+ progress: function(range, ui) {
+ //console.log(ui.pixelRange);
+ //console.log(range);
+ //ui.instance.text('Waiting...');
+ },
+
+ stop: function(s, ui) {
+ //console.log('stop:' + ui.instance.inprogress);
+ },
+
+ start: function() {
+ console.log('user start');
+ }
+
+ });
+
+ }).trigger("click");
+
+
+ $('#p2-create').click(function() {
+
+ $('#p2').progressbar({
+
+ range: true,
+
+ wait: 2000,
+
+ duration:1000,
+
+ stepping: 5,
+
+ progress: function(range, ui) {
+ //console.log(ui.pixelRange);
+ //console.log(range);
+ },
+
+ stop: function(s, ui) {
+ //console.log('stop:' + ui.instance.inprogress);
+ },
+
+ start: function() {
+ //console.log('user start');
+ }
+
+ });
+
+ }).trigger("click");
+
+
+ $('#p3-create').click(function() { $('#p3').progressbar({
+
+ duration: 2000,
+
+ stepping: 30,
+
+ stop: function(s, ui) {
+ console.log('stop:' + ui.instance.inProgress);
+ },
+ progress: function(range, ui) {
+ //console.log(ui.pixelRange);
+ //console.log(range);
+ },
+ start: function() {
+ console.log('user start');
+ }
+ }); }).trigger('click');
+
+});
+
+if(!window.console) {
+ window.console = {
+ log: function() {
+ $('#log').append(arguments[0]+"<br>");
+ $('#log').scrollTop(999999);
+ }
+ };
+}
+
+</script>
+</body>
+</html>
diff --git a/tests/visual/spinner.html b/tests/visual/spinner.html
new file mode 100644
index 000000000..863346c42
--- /dev/null
+++ b/tests/visual/spinner.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<title>Untitled Document</title>
+<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.spinner.js"></script>
+
+
+<script>
+$(document).ready(function(){
+
+ $("input").spinner();
+
+
+});
+</script>
+
+<style type="text/css">
+body {
+background:#fff;
+color:#333;
+font-size:11px;
+font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
+}
+
+.ui-spinner-down, .ui-spinner-up {
+ background: #999;
+ width: 100%;
+}
+
+.ui-spinner {
+ border: 1px solid black;
+}
+
+</style>
+</head>
+
+<body>
+
+<input type="text" id="input" />
+
+</body>
+</html> \ No newline at end of file
diff --git a/tests/visual/tree.html b/tests/visual/tree.html
new file mode 100644
index 000000000..a2c2e14d0
--- /dev/null
+++ b/tests/visual/tree.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<title>Untitled Document</title>
+
+<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.droppable.js"></script>
+<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+
+
+<script>
+$(document).ready(function(){
+
+
+$.widget("ui.tree", {
+ init: function() {
+
+ var self = this;
+
+ this.element.sortable({
+ items: this.options.sortOn,
+ placeholder: "ui-tree-placeholder",
+ start: function() {
+ $(this).data("sortable").placeholder.hide();
+ $(this).data("sortable").refreshPositions(true);
+ },
+ stop: function() {
+ var self = $(this).data("sortable");
+ $(self.options.items, self.element).css("border-top", "0").css("border-bottom", "0");
+ },
+ sortIndicator: function(e, item, append, hardRefresh) {
+
+ append ? append[0].appendChild(this.placeholder[0]) : item.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? item.item[0] : item.item[0].nextSibling));
+
+ $(this.options.items, this.element).css("border-top", "0").css("border-bottom", "0");
+ item.item.css("border-"+(this.direction == "down" ? "top" : "bottom"), "2px solid black");
+
+ }
+ });
+
+
+
+ //Make certain nodes droppable
+ $(this.options.dropOn, this.element).droppable({
+ accept: this.options.sortOn,
+ hoverClass: this.options.hoverClass,
+ //tolerance: "pointer",
+ over: function() {
+ $(self.options.sortOn, self.element).css("border-top", "0").css("border-bottom", "0");
+ },
+ drop: function(e, ui) {
+ $(this).parent().find("ul").append(ui.draggable);
+ self.element.data("sortable")._noFinalSort = true;
+ }
+ });
+
+ }
+});
+
+$.extend($.ui.tree, {
+ defaults: {
+ sortOn: "*",
+ dropOn: "div",
+ hoverClass: "ui-tree-hover"
+ }
+});
+
+$("ul.sortable").tree({
+ sortOn: "li",
+ dropOn: "div",
+ hoverClass: "hover"
+});
+
+
+
+});
+</script>
+
+<style type="text/css">
+body {
+background:#fff;
+color:#333;
+font-size:11px;
+font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
+}
+
+.hover {
+ background: green;
+ color: #fff;
+}
+
+.placeholder {
+ display: none;
+}
+</style>
+</head>
+
+<body>
+
+ <ul class="sortable">
+ <li>Item 1</li>
+ <li><div>Item 2</div>
+ <ul>
+ <li>Sub Item 1</li>
+ <li>Sub Item 3</li>
+ <li>Sub Item 4</li>
+ <li>Sub Item 5</li>
+ </ul>
+ </li>
+ <li>Item 3</li>
+ <li>Item 4</li>
+ <li><div>Item 2</div>
+ <ul>
+ <li>Sub Item 1</li>
+ <li>Sub Item 3</li>
+ <li>Sub Item 4</li>
+ <li>Sub Item 5</li>
+ </ul>
+ </li>
+ <li>Item 6</li>
+ <li>Item 7</li>
+ <li>Item 8</li>
+ </ul>
+
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-12 23:01:09 +0000