diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-10-13 15:29:56 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-10-13 15:29:56 -0400 |
| commit | b12d528e8f84fa6509165e7adef09da0b4a71469 (patch) | |
| tree | a1ccb7dc49df340b7293b348b8eb795bc726237b | |
| parent | a300658ecf9bd325ca4c41f52c7e1d2572c4660f (diff) | |
| download | jquery-ui-b12d528e8f84fa6509165e7adef09da0b4a71469.tar.gz jquery-ui-b12d528e8f84fa6509165e7adef09da0b4a71469.zip | |
Effects (toggle) demos: Coding standards.
| -rw-r--r-- | demos/toggle/default.html | 76 | ||||
| -rw-r--r-- | demos/toggle/index.html | 4 |
2 files changed, 41 insertions, 39 deletions
diff --git a/demos/toggle/default.html b/demos/toggle/default.html index d34fb22cd..28202a4db 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -1,52 +1,54 @@ <!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> @@ -82,10 +84,10 @@ <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/toggle/index.html b/demos/toggle/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/toggle/index.html +++ b/demos/toggle/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> |