Skip to content

Commit

Permalink
reverted r 1920
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott Jehl committed Jan 30, 2009
1 parent 8d61ce3 commit 3353f65
Show file tree
Hide file tree
Showing 18 changed files with 937 additions and 99 deletions.
222 changes: 222 additions & 0 deletions demos/effect_types/all_effects.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,222 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects Test Suite</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.1.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.drop.js"></script>
<script type="text/javascript" src="../../ui/effects.explode.js"></script>
<script type="text/javascript" src="../../ui/effects.fold.js"></script>
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
<script type="text/javascript" src="../../ui/effects.pulsate.js"></script>
<script type="text/javascript" src="../../ui/effects.scale.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">

$(function() {

$("li div")
.hover(function() { $(this).addClass("ui-state-hover"); },
function() { $(this).removeClass("ui-state-hover"); });
var effect = function(el, n, o) {
$.extend(o, {
easing: "easeOutQuint"
});

$(el).bind("click", function() {

$(this).hide(n, o, 1000, function() {
var self = this;
window.setTimeout(function() {
$(self).show(n, o, 1000);
},500);
});
});

};
effect("#blindHorizontally", "blind", { direction: "horizontal" });
effect("#blindVertically", "blind", { direction: "vertical" });
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("#fold", "fold", { size: 50 });
effect("#highlight", "highlight", {});
effect("#pulsate", "pulsate", { times: 2 });
effect("#puff", "puff", { times: 2 });
effect("#scale", "scale", {});
$("#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"); }); });
});
</script>

<style>
li { height:70px; width:80px; float:left; list-style:none; margin:5px; }
li div { height:56px; width:66px; padding:7px; }
li div p strong { display:block; font-size:110%; margin-bottom:2px; }
.ui-effects-transfer {
border: 1px dotted #fff;
background: #666;
opacity: 0.25;
}
</style>

</head>
<body>

<ul class="effects">

<li>
<div class="ui-state-default ui-corner-all" id="blindHorizontally">
<p><strong>Blind</strong>horizontally</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="blindVertically">
<p><strong>Blind</strong> vertically</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="bounce3times">
<p><strong>Bounce</strong> 3 times</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="clipHorizontally">
<p><strong>Clip</strong> horizontally</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="clipVertically">
<p><strong>Clip</strong> vertically</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="dropDown">
<p><strong>Drop</strong> down</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="dropUp">
<p><strong>Drop</strong> up</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="dropLeft">
<p><strong>Drop</strong> left</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="dropRight">
<p><strong>Drop</strong> right</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="explode9">
<p><strong>Explode</strong> in 9 pieces</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="explode36">
<p><strong>Explode</strong> in 36 pieces</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="fold">
<p><strong>Fold</strong></p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="highlight">
<p><strong>Highlight</strong></p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="pulsate">
<p><strong>Pulsate</strong> 2 times</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="puff">
<p><strong>Puff</strong></p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="scale">
<p><strong>Scale</strong></p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="shake">
<p><strong>Shake</strong></p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="slideDown">
<p><strong>Slide</strong> down</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="slideUp">
<p><strong>Slide</strong> up</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="slideLeft">
<p><strong>Slide</strong> left</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="slideRight">
<p><strong>Slide</strong> right</p>
</div>
</li>

<li>
<div class="ui-state-default ui-corner-all" id="transfer">
<p><strong>Transfer</strong> to 1st element</p>
</div>
</li>

</ul>

</body>
</html>
19 changes: 9 additions & 10 deletions demos/effect_types/toggle.html → demos/effect_types/blind.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,22 +1,21 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Toggle Demo</title> <title>jQuery UI Effects - Blind Demo</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.bounce.js"></script> <script type="text/javascript" src="../../ui/effects.blind.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
.toggler { width: 500px; height: 300px; } .toggler { width: 500px; height: 300px; }
#button { padding: .5em 1em; text-decoration: none; } #blind { width: 240px; height: 135px; padding: 0.4em; }
#toggle { width: 240px; height: 135px; padding: 0.4em; } #blind h3 { margin: 0; padding: 0.4em; text-align: center; }
#toggle h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#button").click(function() { $(".toggler").click(function() {
$("#toggle").toggle("bounce"); $("> :eq(0)", this).toggle("blind");
}); });
}); });
</script> </script>
Expand All @@ -26,14 +25,14 @@
<div class="demo"> <div class="demo">


<div class="toggler"> <div class="toggler">
<div id="toggle" class="ui-widget-content ui-corner-all"> <div id="blind" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Toggle</h3> <h3 class="ui-widget-header ui-corner-all">Blind</h3>
<p> <p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p> </p>
</div> </div>
</div> </div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
</div><!-- End demo --> </div><!-- End demo -->


<div class="demo-description"> <div class="demo-description">
Expand Down
42 changes: 42 additions & 0 deletions demos/effect_types/bounce.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Bounce Demo</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#bounce { width: 240px; height: 135px; padding: 0.4em; }
#bounce h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#bounce").click(function() {
$(this).effect("bounce");
});
});
</script>
</head>
<body>

<div class="demo">

<div id="bounce" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>Click anywhere in the dialog above to preview the effect.</p>

</div><!-- End demo-description -->

</body>
</html>
20 changes: 9 additions & 11 deletions demos/effect_types/hide.html → demos/effect_types/clip.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,22 +1,21 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Hide Demo</title> <title>jQuery UI Effects - Clip Demo</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.bounce.js"></script> <script type="text/javascript" src="../../ui/effects.clip.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
.toggler { width: 500px; height: 300px; } .toggler { width: 500px; height: 300px; }
#button { padding: .5em 1em; text-decoration: none; } #clip { width: 240px; height: 135px; padding: 0.4em; }
#hide { width: 240px; height: 135px; padding: 0.4em; } #clip .ui-widget-header { margin: 0; padding: 0.4em; text-align: center; }
#hide h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#button").click(function() { $(".toggler").click(function() {
$('#hide').hide("bounce"); $("> :eq(0)", this).toggle("clip");
}); });
}); });
</script> </script>
Expand All @@ -26,20 +25,19 @@
<div class="demo"> <div class="demo">


<div class="toggler"> <div class="toggler">
<div id="hide" class="ui-widget-content ui-corner-all"> <div id="clip" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hide</h3> <h3 class="ui-widget-header ui-corner-all">Clip</h3>
<p> <p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p> </p>
</div> </div>
</div> </div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>


</div><!-- End demo --> </div><!-- End demo -->


<div class="demo-description"> <div class="demo-description">


<p>Click anywhere in the frame above to see the effect.</p> <p>Click anywhere in the frame above to toggle the effect.</p>


</div><!-- End demo-description --> </div><!-- End demo-description -->


Expand Down
Loading

0 comments on commit 3353f65

Please sign in to comment.