mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-04-20 03:02:41 -04:00
- removed 1.6 branch
- changed version in tags/1.5.2 to 1.5.2 - merged trunk with 1.6
This commit is contained in:
Paul Bakaus
108
tests/visual/magnifier.html
Normal file
108
tests/visual/magnifier.html
Normal file
@@ -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>
|
||||
256
tests/visual/progressbar.html
Normal file
256
tests/visual/progressbar.html
Normal file
@@ -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>
|
||||
45
tests/visual/spinner.html
Normal file
45
tests/visual/spinner.html
Normal file
@@ -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>
|
||||
130
tests/visual/tree.html
Normal file
130
tests/visual/tree.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user