<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Effects - Toggle Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- .toggler { width: 500px; height: 200px; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
- #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.effects.core.js"></script>
+ <script src="../../ui/jquery.effects.blind.js"></script>
+ <script src="../../ui/jquery.effects.bounce.js"></script>
+ <script src="../../ui/jquery.effects.clip.js"></script>
+ <script src="../../ui/jquery.effects.drop.js"></script>
+ <script src="../../ui/jquery.effects.explode.js"></script>
+ <script src="../../ui/jquery.effects.fold.js"></script>
+ <script src="../../ui/jquery.effects.highlight.js"></script>
+ <script src="../../ui/jquery.effects.pulsate.js"></script>
+ <script src="../../ui/jquery.effects.scale.js"></script>
+ <script src="../../ui/jquery.effects.shake.js"></script>
+ <script src="../../ui/jquery.effects.slide.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+ #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
- <script type="text/javascript">
+ <script>
$(function() {
- //run the currently selected effect
- function runEffect(){
- //get effect type from
- var selectedEffect = $('#effectTypes').val();
+ // run the currently selected effect
+ function runEffect() {
+ // get effect type from
+ var selectedEffect = $( "#effectTypes" ).val();
- //most effect types need no options passed by default
+ // most effect types need no options passed by default
var options = {};
- //check if it's scale or size - they need options explicitly set
- if(selectedEffect == 'scale'){ options = {percent: 0}; }
- else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
+ // some effects have required parameters
+ if ( selectedEffect === "scale" ) {
+ options = { percent: 0 };
+ } else if ( selectedEffect === "size" ) {
+ options = { to: { width: 200, height: 60 } };
+ }
- //run the effect
- $("#effect").toggle(selectedEffect,options,500);
+ // run the effect
+ $( "#effect" ).toggle( selectedEffect, options, 500 );
};
- //set effect from select menu value
- $("#button").click(function() {
+ // set effect from select menu value
+ $( "#button" ).click(function() {
runEffect();
return false;
});
-
});
</script>
</head>
<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 class="demo-description">
+<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->
</body>
projects / jquery-ui.git / commitdiff