--- /dev/null
+<!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>
\ No newline at end of file
projects / jquery-ui.git / commitdiff