diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 10:24:33 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 10:24:33 -0400 |
| commit | 4a4fab829f850d9de69f5f0c2cd718933d9b8944 (patch) | |
| tree | 3b1c2ff7dc3a00ae065d39d1bb47b559818b2f30 /demos/position/cycler.html | |
| parent | 0956c9ec4087320e0cc3e2cd1c29d3c24187890d (diff) | |
| download | jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.tar.gz jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.zip | |
Position demos: Coding standards.
Diffstat (limited to 'demos/position/cycler.html')
| -rw-r--r-- | demos/position/cycler.html | 111 |
1 files changed, 54 insertions, 57 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html index fa0571e33..59c98b1ec 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -1,30 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</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.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> html, body { margin: 0; padding: 0 } </style> - - <script type="text/javascript"> + <script> $(function() { - - $.fn.position2 = function(options) { - return this.position($.extend({ + $.fn.position2 = function( options ) { + return this.position( $.extend({ of: window, - using: function(to) { - $(this).css({ + using: function( to ) { + $( this ).css({ top: to.top, left: to.left }) @@ -32,8 +29,8 @@ collision: "none" }, options)); } - - $.fn.left = function(using) { + + $.fn.left = function( using ) { return this.position2({ my: "right middle", at: "left middle", @@ -41,7 +38,7 @@ using: using }); } - $.fn.right = function(using) { + $.fn.right = function( using ) { return this.position2({ my: "left middle", at: "right middle", @@ -49,76 +46,76 @@ using: using }); } - $.fn.center = function(using) { + $.fn.center = function( using ) { return this.position2({ my: "center middle", at: "center middle", using: using }); }; - - $("img:eq(0)").left(); - $("img:eq(1)").center(); - $("img:eq(2)").right(); - - $("body").css({ + + $( "img:eq(0)" ).left(); + $( "img:eq(1)" ).center(); + $( "img:eq(2)" ).right(); + + $( "body" ).css({ overflow: "hidden" }) - $(".demo").css({ + $( ".demo" ).css({ position: "relative", }); - $(".demo img").css({ + $( ".demo img" ).css({ position: "absolute", }); - - function animate(to) { - $(this).animate(to); + + function animate( to ) { + $(this).animate( to ); } function next() { - $("img:eq(2)").center(animate); - $("img:eq(1)").left(animate) - $("img:eq(0)").right().appendTo(".demo"); + $( "img:eq(2)" ).center( animate ); + $( "img:eq(1)" ).left( animate ) + $( "img:eq(0)" ).right().appendTo( ".demo" ); } function previous() { - $("img:eq(0)").center(animate); - $("img:eq(1)").right(animate); - $("img:eq(2)").left().prependTo(".demo"); + $( "img:eq(0)" ).center( animate ); + $( "img:eq(1)" ).right( animate ); + $( "img:eq(2)" ).left().prependTo( ".demo" ); } - $("#previous").click(previous); - $("#next").click(next); - - $(".demo img").click(function() { - $(".demo img").index(this) == 0 ? previous() : next(); + $( "#previous" ).click( previous ); + $( "#next" ).click( next ); + + $( ".demo img" ).click(function() { + $( ".demo img" ).index( this ) === 0 ? previous() : next(); + }); + + $( window ).resize(function() { + $( "img:eq(0)" ).left( animate ); + $( "img:eq(1)" ).center( animate ); + $( "img:eq(2)" ).right( animate ); }); - - $(window).resize(function() { - $("img:eq(0)").left(animate); - $("img:eq(1)").center(animate); - $("img:eq(2)").right(animate); - }) }); </script> - </head> <body> <div class="demo"> - <img src="images/earth.jpg" /> - <img src="images/flight.jpg" /> - <img src="images/rocket.jpg" /> +<img src="images/earth.jpg" /> +<img src="images/flight.jpg" /> +<img src="images/rocket.jpg" /> - <a id="previous" href="#">Previous</a> - <a id="next" href="#">Next</a> -</div> +<a id="previous" href="#">Previous</a> +<a id="next" href="#">Next</a> + +</div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them. <br/>Use the links at the top to cycle, or click on the images on the left and right. <br/>Note how the images are repositioned when resizing the window. <br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> - </div><!-- End demo-description --> </body> |