diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-27 15:54:52 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-27 15:54:52 -0400 |
| commit | 99b71a51c8cec70ab7ebccf61d6d388ef114d92d (patch) | |
| tree | 0587b5fb730555ddd1277232f4cdc11d84092dba /demos | |
| parent | 03517636e8f68b4541537d24501affcd62d20059 (diff) | |
| download | jquery-ui-99b71a51c8cec70ab7ebccf61d6d388ef114d92d.tar.gz jquery-ui-99b71a51c8cec70ab7ebccf61d6d388ef114d92d.zip | |
Effects (show): coding standards.
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/show/default.html | 95 | ||||
| -rw-r--r-- | demos/show/index.html | 4 |
2 files changed, 50 insertions, 49 deletions
diff --git a/demos/show/default.html b/demos/show/default.html index 65cb288e5..dbbd3a9ab 100644 --- a/demos/show/default.html +++ b/demos/show/default.html @@ -1,61 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Show 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: 100}; } - else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; } - - //run the effect - $("#effect").show(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 100 }; + } 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); + function callback() { + setTimeout(function() { + $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - - $("#effect").hide(); + + $( "#effect" ).hide(); }); </script> </head> @@ -90,13 +92,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/show/index.html b/demos/show/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/show/index.html +++ b/demos/show/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> |