-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
David Murdoch
committed
May 12, 2011
1 parent
b649799
commit 396ed55
Showing
1 changed file
with
177 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Position Visual Test: Default</title> | ||
|
|
||
| <link rel="stylesheet" href="../visual.css" type="text/css" /> | ||
| <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> | ||
|
|
||
| <script type="text/javascript" src="../../../jquery-1.5.1.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> | ||
|
|
||
| <style> | ||
| html, body { | ||
| height:100%; | ||
| width:100%; | ||
| margin:0; | ||
| } | ||
| .demo-description { | ||
| text-align:center; | ||
| padding:1.5em; | ||
| } | ||
| .demo-container { | ||
| background:#aaa; | ||
| width:80%; | ||
| height:80%; | ||
| margin:0 auto; | ||
| position:relative; | ||
| padding:10px; | ||
| } | ||
| .demo { | ||
| background:#eee; | ||
| overflow:hidden; | ||
| position:relative; | ||
| height:100%; | ||
| } | ||
| #parent { | ||
| width: 60%; | ||
| margin: 10px auto; | ||
| padding: 5px; | ||
| border: 1px solid #777; | ||
| background-color: #fbca93; | ||
| text-align: center; | ||
| cursor:move; | ||
| } | ||
| .positionable { | ||
| width: 75px; | ||
| height: 75px; | ||
| position: absolute; | ||
| display: block; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: #bcd5e6; | ||
| text-align: center; | ||
| border:solid 2px #555; | ||
| cursor:move; | ||
| } | ||
| select, input { | ||
| margin-left: 15px; | ||
| } | ||
| </style> | ||
| <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(), | ||
| using: using, | ||
| within: $( ".demo" ), | ||
| collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() | ||
| }); | ||
| } | ||
|
|
||
| $( ".positionable" ).css( "opacity", 0.5 ); | ||
|
|
||
| $( ":input" ).bind( "click keyup change", function() { position(); } ); | ||
|
|
||
| $( "#parent" ).draggable({ | ||
| drag: function() { position(); } | ||
| }); | ||
|
|
||
| $( ".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 ) ); | ||
| position(); | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| position(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="demo-description"> | ||
| 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. | ||
| </div><!-- End demo-description --> | ||
|
|
||
| <div class="demo-container"> | ||
| <div class="demo"> | ||
|
|
||
| <div id="parent"> | ||
| <p>This is the position parent element.</p> | ||
| </div> | ||
|
|
||
| <div class="positionable"> | ||
| <p>to position</p> | ||
| </div> | ||
|
|
||
| <div class="positionable" style="width:120px; height: 40px;"> | ||
| <p>to position 2</p> | ||
| </div> | ||
|
|
||
| <div style="padding: 20px; margin-top: 75px;"> | ||
| position... | ||
| <div style="padding-bottom: 20px;"> | ||
| <b>my:</b> | ||
| <select id="my_horizontal"> | ||
| <option value="left">left</option> | ||
| <option value="center">center</option> | ||
| <option value="right">right</option> | ||
| </select> | ||
| <select id="my_vertical"> | ||
| <option value="top">top</option> | ||
| <option value="middle">center</option> | ||
| <option value="bottom">bottom</option> | ||
| </select> | ||
| </div> | ||
| <div style="padding-bottom: 20px;"> | ||
| <b>at:</b> | ||
| <select id="at_horizontal"> | ||
| <option value="left">left</option> | ||
| <option value="center">center</option> | ||
| <option value="right">right</option> | ||
| </select> | ||
| <select id="at_vertical"> | ||
| <option value="top">top</option> | ||
| <option value="middle">center</option> | ||
| <option value="bottom">bottom</option> | ||
| </select> | ||
| </div> | ||
| <div style="padding-bottom: 20px;"> | ||
| <b>offset:</b> | ||
| <input id="offset" type="text" size="15"/> | ||
| </div> | ||
| <div style="padding-bottom: 20px;"> | ||
| <b>collision:</b> | ||
| <select id="collision_horizontal"> | ||
| <option value="flip">flip</option> | ||
| <option value="fit">fit</option> | ||
| <option value="none">none</option> | ||
| </select> | ||
| <select id="collision_vertical"> | ||
| <option value="flip">flip</option> | ||
| <option value="fit">fit</option> | ||
| <option value="none">none</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div><!-- End demo --> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |