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 | |
| parent | 0956c9ec4087320e0cc3e2cd1c29d3c24187890d (diff) | |
| download | jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.tar.gz jquery-ui-4a4fab829f850d9de69f5f0c2cd718933d9b8944.zip | |
Position demos: Coding standards.
Diffstat (limited to 'demos/position')
| -rw-r--r-- | demos/position/cycler.html | 111 | ||||
| -rw-r--r-- | demos/position/default.html | 74 | ||||
| -rw-r--r-- | demos/position/index.html | 4 |
3 files changed, 90 insertions, 99 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> diff --git a/demos/position/default.html b/demos/position/default.html index d26959b96..67f8578d6 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -1,28 +1,25 @@ <!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.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.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.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> div#parent { width: 60%; margin: 10px auto; padding: 5px; - border: 1px solid #777; background-color: #fbca93; text-align: center; } - div.positionable { width: 75px; height: 75px; @@ -33,49 +30,46 @@ background-color: #bcd5e6; text-align: center; } - select, input { margin-left: 15px; } - </style> - <script type="text/javascript"> + <script> $(function() { - - function position(using) { - $('.positionable').position({ - of: $('#parent'), - my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), - at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(), - offset: $('#offset').val(), + function position( using ) { + $( ".positionable" ).position({ + of: $( "#parent" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + offset: $( "#offset" ).val(), using: using, - collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() + collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val() }); } - - $('.positionable').css("opacity", 0.5); - - $(':input').bind('click keyup change', function() { position(); }); - - $("#parent").draggable({ + + $( ".positionable" ).css( "opacity", 0.5 ); + + $( ":input" ).bind( "click keyup change", function() { position(); }); + + $( "#parent" ).draggable({ drag: function() { position(); } }); - - $('.positionable').draggable({ - drag: function(event, ui) { + + $( ".positionable" ).draggable({ + drag: function( event, ui ) { // reset offset before calculating it - $("#offset").val("0"); - position(function(result) { - $("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top)); + $( "#offset" ).val( "0" ); + position(function( result ) { + $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + + " " + ( ui.offset.top - result.top ) ); position(); }); } }); - + position(); }); </script> - </head> <body> @@ -148,11 +142,11 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. <br/>Drag around the parent element to see collision detection in action.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/position/index.html b/demos/position/index.html index 54a6d54c6..498c09b2b 100644 --- a/demos/position/index.html +++ b/demos/position/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position Demo</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> |