diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-09 21:56:28 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-09 22:33:28 -0400 |
| commit | 83244d933c481c6abdb2f957172d991212321d16 (patch) | |
| tree | aafd07312295cb8fd0e0b1ac37f7b80a95288df8 /demos/effect/default.html | |
| parent | b79e92818fa027bbd3daec17d6417940e2b156ed (diff) | |
| download | jquery-ui-83244d933c481c6abdb2f957172d991212321d16.tar.gz jquery-ui-83244d933c481c6abdb2f957172d991212321d16.zip | |
Effects demos (partial): Coding standards.
Diffstat (limited to 'demos/effect/default.html')
| -rw-r--r-- | demos/effect/default.html | 94 |
1 files changed, 48 insertions, 46 deletions
diff --git a/demos/effect/default.html b/demos/effect/default.html index f2988c5c3..6f6f0d6c4 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -1,60 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Effect 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.fade.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> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <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.fade.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> + <script src="../../ui/jquery.effects.transfer.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } #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; } .ui-effects-transfer { border: 2px dotted gray; } </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, 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").effect(selectedEffect,options,500,callback); + // some effects have required parameters + 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" ).effect( selectedEffect, options, 500, callback ); }; - - //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:hidden").removeAttr('style').hide().fadeIn(); - }, 1000); + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); @@ -94,13 +97,12 @@ <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 show the effect.</p> +<div class="demo-description"> +<p>Click the button above to show the effect.</p> </div><!-- End demo-description --> </body> |