-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Created new folder for effect_types that includes all standard effect…
…s together to match the new effects docs structure. Also created a new default.html page that contains a set of all effect demos together on one page. If this looks ok, the 3 separate effects folders can be deleted.
- Loading branch information
Todd Parker
committed
Jan 27, 2009
1 parent
84a0971
commit 61f39e1
Showing
16 changed files
with
859 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,45 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<title>jQuery UI Effects - Blind 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.blind.js"></script> | |||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | |||
<style type="text/css"> | |||
.toggler { width: 500px; height: 300px; } | |||
#blind { width: 240px; height: 135px; padding: 0.4em; } | |||
#blind h3 { margin: 0; padding: 0.4em; text-align: center; } | |||
</style> | |||
<script type="text/javascript"> | |||
$(function() { | |||
$(".toggler").click(function() { | |||
$("> :eq(0)", this).toggle("blind"); | |||
}); | |||
}); | |||
</script> | |||
</head> | |||
<body> | |||
|
|||
<div class="demo"> | |||
|
|||
<div class="toggler"> | |||
<div id="blind" class="ui-widget-content ui-corner-all"> | |||
<h3 class="ui-widget-header ui-corner-all">Blind</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,45 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<title>jQuery UI Effects - Clip 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.clip.js"></script> | |||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | |||
<style type="text/css"> | |||
.toggler { width: 500px; height: 300px; } | |||
#clip { width: 240px; height: 135px; padding: 0.4em; } | |||
#clip .ui-widget-header { margin: 0; padding: 0.4em; text-align: center; } | |||
</style> | |||
<script type="text/javascript"> | |||
$(function() { | |||
$(".toggler").click(function() { | |||
$("> :eq(0)", this).toggle("clip"); | |||
}); | |||
}); | |||
</script> | |||
</head> | |||
<body> | |||
|
|||
<div class="demo"> | |||
|
|||
<div class="toggler"> | |||
<div id="clip" class="ui-widget-content ui-corner-all"> | |||
<h3 class="ui-widget-header ui-corner-all">Clip</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,199 @@ | |||
<!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.</p> | |||
|
|||
</div><!-- End demo-description --> | |||
|
|||
</body> | |||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,45 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<title>jQuery UI Effects - Drop 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.drop.js"></script> | |||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | |||
<style type="text/css"> | |||
.toggler { width: 500px; height: 300px; } | |||
#drop { width: 240px; height: 135px; padding: 0.4em; } | |||
#drop .ui-widget-header { margin: 0; padding: 0.4em; text-align: center; } | |||
</style> | |||
<script type="text/javascript"> | |||
$(function() { | |||
$(".toggler").click(function() { | |||
$("> :eq(0)", this).toggle("drop"); | |||
}); | |||
}); | |||
</script> | |||
</head> | |||
<body> | |||
|
|||
<div class="demo"> | |||
|
|||
<div class="toggler"> | |||
<div id="drop" class="ui-widget-content ui-corner-all"> | |||
<h3 class="ui-widget-header ui-corner-all">Drop</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> |
Oops, something went wrong.