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

added effect methods demos - still have not made demos for the class animations

Browse Source
This commit is contained in:
Scott Jehl 2009-01-30 22:35:58 +00:00
parent 4aff25a422
commit 8d61ce344b
18 changed files with 99 additions and 937 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
demos/effect_types/all_effects.html
View File

@ -1,222 +0,0 @@
<!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>

25
demos/effect_types/explode.html → demos/effect_types/animate.html
View File

@ -1,22 +1,27 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effects - Explode Demo</title> <title>jQuery UI Effect Methods - Animate 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.explode.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; }
#explode { width: 240px; height: 135px; padding: 0.4em; } #button { padding: .5em 1em; text-decoration: none; }
#explode h3 { margin: 0; padding: 0.4em; text-align: center; } #animate { width: 240px; height: 135px; padding: 0.4em; background: #fff;}
#animate h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$(".toggler").click(function() { $("#button").toggle(
$("> :eq(0)", this).toggle("explode"); function() {
}); $("#animate").animate({backgroundColor: '#aa0000', color: '#fff'}, 1000);
},
function() {
$("#animate").animate({backgroundColor: '#fff', color: '#000'}, 1000);
}
);
}); });
</script> </script>
</head> </head>
@ -25,14 +30,16 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="explode" class="ui-widget-content ui-corner-all"> <div id="animate" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Explode</h3> <h3 class="ui-widget-header ui-corner-all">Animate</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">

42
demos/effect_types/bounce.html
View File

@ -1,42 +0,0 @@
<!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>

199
demos/effect_types/default.html
View File

@ -1,199 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - All Effect Types</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.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.puff.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.size.js"></script>
<script type="text/javascript" src="../../ui/effects.slide.js"></script>
<script type="text/javascript" src="../../ui/effects.shake.js"></script>
<script type="text/javascript" src="../../ui/effects.transfer.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.wrapper { width: 110px; height: 90px; float:left; margin:5px; cursor:pointer; }
.ui-widget-content { padding: 0.4em; }
.ui-widget-content h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
<script type="text/javascript">
$(function() {
$("#blind").click(function() {
$(this).children(0).toggle("blind");
});
$("#bounce").click(function() {
$(this).children(0).effect("bounce");
});
$("#clip").click(function() {
$(this).children(0).toggle("clip");
});
$("#drop").click(function() {
$(this).children(0).toggle("drop");
});
$("#explode").click(function() {
$(this).children(0).toggle("explode");
});
$("#fold").click(function() {
$(this).children(0).toggle("fold");
});
$("#highlight").click(function() {
$(this).children(0).effect("highlight");
});
$("#puff").click(function() {
$(this).children(0).toggle("puff");
});
$("#pulsate").click(function() {
$(this).children(0).effect("pulsate");
});
$("#scale").click(function() {
$(this).children(0).toggle("scale", { percent: 25 });
});
$("#shake").click(function() {
$(this).children(0).effect("shake");
});
$("#size").click(function() {
$(this).children(0).toggle(
function(){ $(this).effect("size", { to: {width: 50,height: 10} }); },
function(){ $(this).effect("size", { to: {width: 100,height: 70} }); }
);
});
$("#slide").click(function() {
$(this).children(0).toggle("slide");
});
$("#transfer").click(function() {
$(this).children(0).effect("transfer", {
to: "#highlight"
});
});
});
</script>
</head>
<body>
<div class="demo">
<div class="wrapper" id="blind">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Blind</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="bounce">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="clip">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Clip</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="drop">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Drop</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="explode">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Explode</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="fold">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Fold</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="highlight">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Highlight</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="puff">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Puff</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="pulsate">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Pulsate</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="scale">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Scale</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="shake">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Shake</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="size">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Size</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="slide">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Slide</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
<div class="wrapper" id="transfer">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Transfer</h3>
<p>Click to view the effect in action. </p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Click anywhere in the dialog above to preview the effect, click again to revert it.</p>
</div><!-- End demo-description -->
</body>
</html>

22
demos/effect_types/clip.html → demos/effect_types/effect.html
View File

@ -1,21 +1,22 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effects - Clip Demo</title> <title>jQuery UI Effect Methods - Effect 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.clip.js"></script> <script type="text/javascript" src="../../ui/effects.bounce.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; }
#clip { width: 240px; height: 135px; padding: 0.4em; } #button { padding: .5em 1em; text-decoration: none; }
#clip .ui-widget-header { margin: 0; padding: 0.4em; text-align: center; } #effect { width: 240px; height: 135px; padding: 0.4em; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$(".toggler").click(function() { $("#button").click(function() {
$("> :eq(0)", this).toggle("clip"); $("#effect").effect("bounce");
}); });
}); });
</script> </script>
@ -25,19 +26,22 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="clip" class="ui-widget-content ui-corner-all"> <div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Clip</h3> <h3 class="ui-widget-header ui-corner-all">Effect</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 toggle the effect.</p> <p>Click anywhere in the frame above to show the effect.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->

45
demos/effect_types/fold.html
View File

@ -1,45 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Fold 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.fold.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.toggler { width: 500px; height: 300px; }
#fold { width: 240px; height: 135px; padding: 0.4em; }
#fold h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$(".toggler").click(function() {
$("> :eq(0)", this).toggle("fold");
});
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="fold" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Fold</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>
</div><!-- End demo -->
<div class="demo-description">
<p>Click anywhere in the frame above to toggle the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

20
demos/effect_types/blind.html → demos/effect_types/hide.html
View File

@ -1,21 +1,22 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effects - Blind Demo</title> <title>jQuery UI Effect Methods - Hide 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.blind.js"></script> <script type="text/javascript" src="../../ui/effects.bounce.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; }
#blind { width: 240px; height: 135px; padding: 0.4em; } #button { padding: .5em 1em; text-decoration: none; }
#blind h3 { margin: 0; padding: 0.4em; text-align: center; } #hide { width: 240px; height: 135px; padding: 0.4em; }
#hide h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$(".toggler").click(function() { $("#button").click(function() {
$("> :eq(0)", this).toggle("blind"); $('#hide').hide("bounce");
}); });
}); });
</script> </script>
@ -25,19 +26,20 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="blind" class="ui-widget-content ui-corner-all"> <div id="hide" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Blind</h3> <h3 class="ui-widget-header ui-corner-all">Hide</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 toggle the effect.</p> <p>Click anywhere in the frame above to see the effect.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->

42
demos/effect_types/highlight.html
View File

@ -1,42 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Highlight 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.highlight.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#highlight { width: 240px; height: 135px; padding: 0.4em; }
#highlight h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#highlight").click(function() {
$(this).effect("highlight");
});
});
</script>
</head>
<body>
<div class="demo">
<div id="highlight" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Highlight</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>

31
demos/effect_types/index.html
View File

@ -1,31 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - General Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
<h4>Effect examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">All effects</a></li>
<li><a href="blind.html">Blind</a></li>
<li><a href="bounce.html">Bounce</a></li>
<li><a href="clip.html">Clip</a></li>
<li><a href="drop.html">Drop</a></li>
<li><a href="explode.html">Explode</a></li>
<li><a href="fold.html">Fold</a></li>
<li><a href="default.html">Highlight</a></li>
<li><a href="puff.html">Puff</a></li>
<li><a href="pulsate.html">Pulsate</a></li>
<li><a href="scale.html">Scale</a></li>
<li><a href="shake.html">Shake</a></li>
<li><a href="size.html">Size</a></li>
<li><a href="slide.html">Slide</a></li>
<li><a href="transfer.html">Transfer</a></li>
</ul>
</div>
</body>
</html>

45
demos/effect_types/puff.html
View File

@ -1,45 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Puff 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.scale.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.toggler { width: 500px; height: 300px; }
#puff { width: 240px; height: 135px; padding: 0.4em; }
#puff h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$(".toggler").click(function() {
$("> :eq(0)", this).toggle("puff");
});
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="puff" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Puff</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>
</div><!-- End demo -->
<div class="demo-description">
<p>Click anywhere in the frame above to toggle the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

42
demos/effect_types/pulsate.html
View File

@ -1,42 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Pulsate 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.pulsate.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#pulsate { width: 240px; height: 135px; padding: 0.4em; }
#pulsate h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#pulsate").click(function() {
$(this).effect("pulsate");
});
});
</script>
</head>
<body>
<div class="demo">
<div id="pulsate" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Pulsate</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>

44
demos/effect_types/scale.html
View File

@ -1,44 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Scale 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.scale.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#scale { width: 240px; height: 135px; padding: 0.4em; }
#scale h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#scale").toggle(function() {
$(this).effect("scale", { percent: 50 });
}, function() {
$(this).effect("scale", { percent: 200 });
});
});
</script>
</head>
<body>
<div class="demo">
<div id="scale" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Scale</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>

42
demos/effect_types/shake.html
View File

@ -1,42 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Shake 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.shake.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#shake { width: 240px; height: 135px; padding: 0.4em; }
#shake h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#shake").click(function() {
$(this).effect("shake");
});
});
</script>
</head>
<body>
<div class="demo">
<div id="shake" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Shake</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>

49
demos/effect_types/show.html Normal file
View File

@ -0,0 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effect Methods - Show 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">
.toggler { width: 500px; height: 300px; }
#button { padding: .5em 1em; text-decoration: none; }
#show { width: 240px; height: 135px; padding: 0.4em; }
#show h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#button").click(function() {
$("#show").show("bounce");
});
$('#show').hide();
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="show" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</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>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
</div><!-- End demo -->
<div class="demo-description">
<p>Click anywhere in the frame above to show the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

54
demos/effect_types/size.html
View File

@ -1,54 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Size 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.scale.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#size { width: 240px; height: 135px; padding: 0.4em; }
#size h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$("#size").toggle(function() {
$(this).effect("size", {
to: {
width: 300,
height: 100
}
});
}, function() {
$(this).effect("size", {
to: {
width: 240,
height: 135
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="size" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Size</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>

45
demos/effect_types/slide.html
View File

@ -1,45 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Slide 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.slide.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.toggler { width: 500px; height: 300px; }
#slide { width: 240px; height: 135px; padding: 0.4em; }
#slide h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script type="text/javascript">
$(function() {
$(".toggler").click(function() {
$("> :eq(0)", this).toggle("slide");
});
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="slide" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Slide</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>
</div><!-- End demo -->
<div class="demo-description">
<p>Click anywhere in the frame above to toggle the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

19
demos/effect_types/drop.html → demos/effect_types/toggle.html
View File

@ -1,21 +1,22 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effects - Drop Demo</title> <title>jQuery UI Effect Methods - Toggle 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.drop.js"></script> <script type="text/javascript" src="../../ui/effects.bounce.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; }
#drop { width: 240px; height: 135px; padding: 0.4em; } #button { padding: .5em 1em; text-decoration: none; }
#drop .ui-widget-header { margin: 0; padding: 0.4em; text-align: center; } #toggle { width: 240px; height: 135px; padding: 0.4em; }
#toggle h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$(".toggler").click(function() { $("#button").click(function() {
$("> :eq(0)", this).toggle("drop"); $("#toggle").toggle("bounce");
}); });
}); });
</script> </script>
@ -25,14 +26,14 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="drop" class="ui-widget-content ui-corner-all"> <div id="toggle" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Drop</h3> <h3 class="ui-widget-header ui-corner-all">Toggle</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">

48
demos/effect_types/transfer.html
View File

@ -1,48 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Transfer 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.transfer.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-effects-transfer { border: 2px dotted gray; }
#transfer { width: 240px; height: 135px; padding: 0.4em; }
#transfer h3 { margin: 0; padding: 0.4em; text-align: center; }
#transfer-target { width: 80px; height: 80px; margin-top: 80px; }
</style>
<script type="text/javascript">
$(function() {
$("#transfer").click(function() {
$(this).effect("transfer", {
to: "#transfer-target"
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="transfer" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Transfer</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 id="transfer-target" class="ui-widget-header"></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>