diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 10:18:39 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 10:18:39 -0400 |
| commit | 0956c9ec4087320e0cc3e2cd1c29d3c24187890d (patch) | |
| tree | 88ff51b6f56bcd912582a748dd0f988cc4dc8b78 /demos | |
| parent | a1fc59c17e40b89c28920681cd6dd32ed68a4102 (diff) | |
| download | jquery-ui-0956c9ec4087320e0cc3e2cd1c29d3c24187890d.tar.gz jquery-ui-0956c9ec4087320e0cc3e2cd1c29d3c24187890d.zip | |
Effects .hide() demos: Coding standards.
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/hide/default.html | 94 | ||||
| -rw-r--r-- | demos/hide/index.html | 4 |
2 files changed, 49 insertions, 49 deletions
diff --git a/demos/hide/default.html b/demos/hide/default.html index 678092d9a..130c88c93 100644 --- a/demos/hide/default.html +++ b/demos/hide/default.html @@ -1,60 +1,61 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Hide 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} }; } - - //run the effect - $("#effect").hide(selectedEffect,options,500,callback); + // 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" ).hide( selectedEffect, options, 1000, 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; }); - }); </script> </head> @@ -89,13 +90,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 preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/hide/index.html b/demos/hide/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/hide/index.html +++ b/demos/hide/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> |