library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Visual tests: Effects cleanup.

Browse Source
This commit is contained in:
Scott González 2012-05-15 12:52:18 -04:00
parent 1f2469234b
commit 44a086b92c
5 changed files with 118 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tests/visual/effects/effects.all.html → tests/visual/effects/all.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.all.css" type="text/css">
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.blind.js"></script>
@ -19,7 +19,7 @@
<script src="../../../ui/jquery.effects.shake.js"></script>
<script src="../../../ui/jquery.effects.slide.js"></script>
<script src="../../../ui/jquery.effects.transfer.js"></script>
<script src="effects.all.js"></script>
<script src="effects.js"></script>
</head>
<body>
@ -186,19 +186,19 @@
<p>Transfer to first element</p>
</div>
</li>
<li>
<div class="effect" id="addClass">
<p>addClass</p>
</div>
</li>
<li>
<div class="effect" id="removeClass">
<p>removeClass</p>
</div>
</li>
<li>
<div class="effect" id="toggleClass">
<p>toggleClass</p>

106
tests/visual/effects/effects.all.js
View File

@ -1,106 +0,0 @@
$(function() {
var duration = 1000, wait = 500;
$("div.effect")
.hover(function() { $(this).addClass("hover"); },
function() { $(this).removeClass("hover"); });
var effect = function(el, n, o) {
$.extend(o, {
easing: "easeOutQuint"
});
$(el).bind("click", function() {
$(this).addClass("current")
// delaying the initial animation makes sure that the queue stays in tact
.delay( 10 )
.hide( n, o, duration )
.delay( wait )
.show( n, o, duration, function() {
$( this ).removeClass("current");
});
});
};
$("#hide").click(function() {
var el = $(this);
el.addClass("current").hide(duration, function() {
setTimeout(function() {
el.show(duration, function() { el.removeClass("current"); });
}, wait);
});
});
effect("#blindLeft", "blind", { direction: "left" });
effect("#blindUp", "blind", { direction: "up" });
effect("#blindRight", "blind", { direction: "right" });
effect("#blindDown", "blind", { direction: "down" });
effect("#bounce3times", "bounce", { times: 3 });
effect("#clipHorizontally", "clip", { direction: "horizontal" });
effect("#clipVertically", "clip", { direction: "vertical" });
effect("#dropDown", "drop", { direction: "down" });
effect("#dropUp", "drop", { direction: "up" });
effect("#dropLeft", "drop", { direction: "left" });
effect("#dropRight", "drop", { direction: "right" });
effect("#explode9", "explode", {});
effect("#explode36", "explode", { pieces: 36 });
effect("#fade", "fade", {});
effect("#fold", "fold", { size: 50 });
effect("#highlight", "highlight", {});
effect("#pulsate", "pulsate", { times: 2 });
effect("#puff", "puff", { times: 2 });
effect("#scale", "scale", {});
effect("#size", "size", {});
$("#sizeToggle").bind("click", function() {
var opts = { to: { width: 300, height: 300 }};
$(this).addClass('current')
.toggle("size", opts, duration)
.delay(wait)
.toggle("size", opts, duration, function() {
$(this).removeClass("current");
});
});
$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
effect("#slideDown", "slide", { direction: "down" });
effect("#slideUp", "slide", { direction: "up" });
effect("#slideLeft", "slide", { direction: "left" });
effect("#slideRight", "slide", { direction: "right" });
$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
$("#addClass").click(function() {
$(this).addClass(function() {
window.console && console.log(arguments);
return "current";
}, duration, function() {
$(this).removeClass("current");
});
});
$("#removeClass").click(function() {
$(this).addClass("current").removeClass(function() {
window.console && console.log(arguments);
return "current";
}, duration);
});
$("#toggleClass").click(function() {
$(this).toggleClass(function() {
window.console && console.log(arguments);
return "current";
}, duration);
});
});

12
tests/visual/effects/effects.all.css → tests/visual/effects/effects.css
View File

@ -1,13 +1,9 @@
body,html {
margin: 0;
body {
margin: 1em;
padding: 0;
font-size: 12px;
font-family: Arial;
background: #191919;
color: #fff;
}
body { margin: 1em; }
ul.effects {
list-style-type: none;
@ -16,8 +12,6 @@ ul.effects {
}
ul.effects li {
list-style-type: none;
margin: 0;
padding: 0;
width: 120px;
height: 100px;
@ -44,7 +38,7 @@ div.current {
div.effect p {
color: #191919;
font-weight: bold;
margin: 0px;
margin: 0;
padding: 10px;
}

107
tests/visual/effects/effects.js vendored Normal file
View File

@ -0,0 +1,107 @@
$(function() {
var duration = 1000,
wait = 500;
function effect( elem, name, options ) {
$.extend( options, {
easing: "easeOutQuint"
});
$( elem ).click(function() {
$( this )
.addClass( "current" )
// delaying the initial animation makes sure that the queue stays in tact
.delay( 10 )
.hide( name, options, duration )
.delay( wait )
.show( name, options, duration, function() {
$( this ).removeClass( "current" );
});
});
}
$( "#hide" ).click(function() {
$( this )
.addClass( "current" )
.hide( duration )
.delay( wait )
.show( duration, function() {
$( this ).removeClass( "current" );
});
});
effect( "#blindLeft", "blind", { direction: "left" } );
effect( "#blindUp", "blind", { direction: "up" } );
effect( "#blindRight", "blind", { direction: "right" } );
effect( "#blindDown", "blind", { direction: "down" } );
effect( "#bounce3times", "bounce", { times: 3 } );
effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
effect( "#clipVertically", "clip", { direction: "vertical" } );
effect( "#dropDown", "drop", { direction: "down" } );
effect( "#dropUp", "drop", { direction: "up" } );
effect( "#dropLeft", "drop", { direction: "left" } );
effect( "#dropRight", "drop", { direction: "right" } );
effect( "#explode9", "explode", {} );
effect( "#explode36", "explode", { pieces: 36 } );
effect( "#fade", "fade", {} );
effect( "#fold", "fold", { size: 50 } );
effect( "#highlight", "highlight", {} );
effect( "#pulsate", "pulsate", { times: 2 } );
effect( "#puff", "puff", { times: 2 } );
effect( "#scale", "scale", {} );
effect( "#size", "size", {} );
$( "#sizeToggle" ).click(function() {
var options = { to: { width: 300, height: 300 } };
$( this )
.addClass( "current" )
.toggle( "size", options, duration )
.delay( wait )
.toggle( "size", options, duration, function() {
$( this ).removeClass( "current" );
});
});
$( "#shake" ).click(function() {
$( this )
.addClass( "current" )
.effect( "shake", {}, 100, function() {
$( this ).removeClass( "current" );
});
});
effect( "#slideDown", "slide", { direction: "down" } );
effect( "#slideUp", "slide", { direction: "up" } );
effect( "#slideLeft", "slide", { direction: "left" } );
effect( "#slideRight", "slide", { direction: "right" } );
$( "#transfer" ).click(function() {
$( this )
.addClass( "current" )
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
$( this ).removeClass( "current" );
});
});
$( "#addClass" ).click(function() {
$( this ).addClass( "current", duration, function() {
$( this ).removeClass( "current" );
});
});
$( "#removeClass" ).click(function() {
$( this ).addClass( "current" ).removeClass( "current", duration );
});
$( "#toggleClass" ).click(function() {
$( this ).toggleClass( "current", duration );
});
});

8
tests/visual/effects/effects.scale.html → tests/visual/effects/scale.html
View File

@ -3,13 +3,12 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.all.css" type="text/css">
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.scale.js"></script>
<script src="effects.all.js"></script>
<script>
jQuery(function( $ ) {
$(function() {
var test = $( "#testBox" ),
opts = $( ".arg" ),
optsRev = $( opts.get().reverse() ),
@ -82,9 +81,8 @@
}
});
</script>
<style type="text/css">
<style>
#testArea {
/* border: 5px dashed #777;*/
width: 200px;
height: 200px;
position: relative;