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 1 Packages Projects Releases Wiki Activity

updated demos to a standard format - class animations do not seem to work in safari (unsure why)

Browse Source
This commit is contained in:
Scott Jehl 2009-02-27 18:05:18 +00:00
parent 8f8d827826
commit 1ded43162a
12 changed files with 365 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
demos/addClass/default.html Normal file
View File

@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - addClass Demo</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
<style type="text/css">
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
</style>
<script type="text/javascript">
$(function() {
$("#button").click(function() {
$('#effect').addClass('second', 1000, callback);
});
function callback(){
setTimeout(function(){
$('#effect').removeClass('second');
}, 1000);
}
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="effect" class="first ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Add Class</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">Run Effect</a>
</div><!-- End demo -->
<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

17
demos/addClass/index.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
</body>
</html>

16
demos/animate/default.html
View File

@ -1,25 +1,25 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Animate Demo</title> <title>jQuery UI Effects - 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.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: 200px; } .toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#animate { width: 240px; height: 135px; padding: 0.4em; background: #fff;} #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#animate h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#button").toggle( $("#button").toggle(
function() { function() {
$("#animate").animate({backgroundColor: '#aa0000', color: '#fff'}, 1000); $("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
}, },
function() { function() {
$("#animate").animate({backgroundColor: '#fff', color: '#000'}, 1000); $("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
} }
); );
}); });
@ -30,7 +30,7 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="animate" 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">Animate</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.
@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a> <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
</div><!-- End demo --> </div><!-- End demo -->

11
demos/effect/default.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Effect Demo</title> <title>jQuery UI Effects - 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.js"></script>
@ -23,7 +23,6 @@
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.resetLink { position: absolute; top: 50px; left: 40px; color: #ddd; font-size: 24px; }
.ui-effects-transfer { border: 2px dotted gray; } .ui-effects-transfer { border: 2px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -37,10 +36,8 @@
//most effect types need no options passed by default //most effect types need no options passed by default
var options = {}; var options = {};
//check if it's scale, transfer, or size - they need options explicitly set //check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ if(selectedEffect == 'scale'){ options = {percent: 0}; }
options = {percent: 0}; else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
}
else if(selectedEffect == 'transfer'){ options = { to: "#button" }; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
//run the effect //run the effect
@ -91,7 +88,7 @@
<option value="transfer">Transfer</option> <option value="transfer">Transfer</option>
</select> </select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->

69
demos/hide/default.html
View File

@ -1,23 +1,61 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Hide Demo</title> <title>jQuery UI Effects - 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.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> <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>
<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: 200px; } .toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#hide { width: 240px; height: 135px; padding: 0.4em; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#hide h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
//run the currently selected effect
function runEffect(){
//get effect type from
var selectedEffect = $('#effectTypes').val();
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ options = {percent: 0}; }
else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
//run the effect
$("#effect").hide(selectedEffect,options,500,callback);
};
//callback function to bring a hidden box back
function callback(){
setTimeout(function(){
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$("#button").click(function() { $("#button").click(function() {
$('#hide').hide("bounce"); runEffect();
}); });
}); });
</script> </script>
</head> </head>
@ -26,14 +64,33 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="hide" 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">Hide</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>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->

2
demos/index.html
View File

@ -250,6 +250,8 @@
<dd><a href="slider/index.html">Slider</a></dd> <dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd> <dd><a href="tabs/index.html">Tabs</a></dd>
<dt>Effects</dt> <dt>Effects</dt>
<dd><a href="addClass/index.html">Add Class</a></dd>
<dd><a href="removeClass/index.html">Remove Class</a></dd>
<dd><a href="animate/index.html">Animate</a></dd> <dd><a href="animate/index.html">Animate</a></dd>
<dd><a href="effect/index.html">Effect</dd> <dd><a href="effect/index.html">Effect</dd>
<dd><a href="hide/index.html">Hide</a></dd> <dd><a href="hide/index.html">Hide</a></dd>

56
demos/removeClass/default.html Normal file
View File

@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - removeClass Demo</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
<style type="text/css">
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect { position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
</style>
<script type="text/javascript">
$(function() {
$("#button").click(function() {
$('#effect').removeClass('second', 1000, callback);
});
function callback(){
setTimeout(function(){
$('#effect').addClass('second');
}, 1000);
}
});
</script>
</head>
<body>
<div class="demo">
<div class="toggler">
<div id="effect" class="first second ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Remove Class</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">Run Effect</a>
</div><!-- End demo -->
<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->
</body>
</html>

17
demos/removeClass/index.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
</body>
</html>

72
demos/show/default.html
View File

@ -1,24 +1,62 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Show Demo</title> <title>jQuery UI Effects - Show 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.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> <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>
<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: 200px; } .toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#show { width: 240px; height: 135px; padding: 0.4em; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#show h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
//run the currently selected effect
function runEffect(){
//get effect type from
var selectedEffect = $('#effectTypes').val();
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ options = {percent: 100}; }
else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; }
//run the effect
$("#effect").show(selectedEffect,options,500,callback);
};
//callback function to bring a hidden box back
function callback(){
setTimeout(function(){
$("#effect:visible").removeAttr('style').hide().fadeOut();
}, 1000);
};
//set effect from select menu value
$("#button").click(function() { $("#button").click(function() {
$("#show").show("bounce"); runEffect();
}); });
$('#show').hide();
$("#effect").fadeOut();
}); });
</script> </script>
</head> </head>
@ -27,21 +65,39 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="show" 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">Show</h3> <h3 class="ui-widget-header ui-corner-all">Show</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>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>Click the button above to show the effect.</p> <p>Click the button above to preview the effect.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->

28
demos/switchClass/default.html
View File

@ -1,28 +1,26 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Switch Class Demo</title> <title>jQuery UI Effects - switchClass 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.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: 200px; } .toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#animate h3 { margin: 0; padding: 0.4em; text-align: center; } #effect { position: relative; }
.first { width: 240px; height: 135px; padding: 0.4em; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.second { width: 480px; height: 135px; padding: 0.4em; font-size: 1.6em; } .ui-effects-transfer { border: 2px dotted gray; }
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#button").toggle( $("#button").click(function(){
function() { $(".first").switchClass('first', 'second', 1000);
$("#animate").switchClass('first', 'second'); $(".second").switchClass('second', 'first', 1000);
}, });
function() {
$("#animate").switchClass('second', 'first');
}
);
}); });
</script> </script>
</head> </head>
@ -31,7 +29,7 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="animate" class="first ui-widget-content ui-corner-all"> <div id="effect" class="first ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Switch Class</h3> <h3 class="ui-widget-header ui-corner-all">Switch Class</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.
@ -39,7 +37,7 @@
</div> </div>
</div> </div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->

60
demos/toggle/default.html
View File

@ -1,23 +1,53 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Toggle Demo</title> <title>jQuery UI Effects - 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.2.js"></script> <script type="text/javascript" src="../../jquery-1.3.2.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> <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>
<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: 200px; } .toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#toggle { width: 240px; height: 135px; padding: 0.4em; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#toggle h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
//run the currently selected effect
function runEffect(){
//get effect type from
var selectedEffect = $('#effectTypes').val();
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ options = {percent: 0}; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
//run the effect
$("#effect").toggle(selectedEffect,options,500);
};
//set effect from select menu value
$("#button").click(function() { $("#button").click(function() {
$("#toggle").toggle("bounce"); runEffect();
}); });
}); });
</script> </script>
</head> </head>
@ -26,14 +56,32 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="toggle" 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">Toggle</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>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">

20
demos/toggleClass/default.html
View File

@ -1,22 +1,24 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Effect Methods - Add Class Demo</title> <title>jQuery UI Effects - toggleClass Demo</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" /> <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" /> <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
.toggler { width: 500px; height: 200px; } .toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; } #button { padding: .5em 1em; text-decoration: none; }
#animate { width: 240px; padding: 0.4em; } #effect { position: relative; }
#animate h3 { margin: 0; padding: 0.4em; text-align: center; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.class { font-size: 1.6em; } .ui-effects-transfer { border: 2px dotted gray; }
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#button").click(function() { $("#button").click(function() {
$('#animate').toggleClass('class', 1000); $('#effect').toggleClass('second', 1000);
}); });
}); });
</script> </script>
@ -26,15 +28,15 @@
<div class="demo"> <div class="demo">
<div class="toggler"> <div class="toggler">
<div id="animate" class="ui-widget-content ui-corner-all"> <div id="effect" class="first ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3> <h3 class="ui-widget-header ui-corner-all">Toggle Class</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> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo --> </div><!-- End demo -->