<ul>
<li><a href="position/position.html">General</a></li>
<li><a href="position/position_feedback.html">Feedback</a></li>
- <li><a href="position/position_feedback_rotate.html">Feedback (rotate)</a></li>
- <li><a href="position/position_fit.html">Collision - fit</a></li>
- <li><a href="position/position_flip.html">Collision - flip</a></li>
- <li><a href="position/position_flipfit.html">Collision - flipfit</a></li>
- <li><a href="position/position_margin.html">Margins</a></li>
- <li><a href="position/position_within.html">Within</a></li>
</ul>
<h2>Tooltip</h2>
-<!DOCTYPE html>
+<!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.7.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>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
- $(function() {
- var inputs = $("input");
- $("ul").insertAfter(inputs);
- $(window).resize(function() {
- inputs.each(function() {
- var input = $(this).position({
- my: this.id.replace(/-/, " "),
- at: this.id.replace(/-/, " "),
- of: "#container",
- collision: "none"
- });
- var menu = $(this).next().menu()
- menu.position({
- my: "left+30 top+20",
- at: "left bottom",
- of: this,
- using: function( position, feedback ) {
- input.val(feedback.horizontal + " " + feedback.vertical)
- $(this).offset( position );
- $(this)
- .removeClass("left right top bottom center middle")
- .addClass(feedback.horizontal)
- .addClass(feedback.vertical);
- }
- });
- });
- }).resize();
- });
- </script>
+ <meta charset="utf-8">
+ <title>Position Visual Test: Containing Element</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 src="../../../jquery-1.7.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>
+
<style>
- input, .ui-menu { position: absolute; }
- .ui-menu { width: 200px; }
- html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
- #container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
- .ui-menu:before {
- font-size: 12pt;
- content: "↑";
- position: absolute;
- top: -22px;
- left: 5px;
+ html, body {
+ height:100%;
+ width:100%;
+ margin:0;
+ /* force scroll bar*/
+ min-height:800px;
+ min-width:800px;
+
+ /* IE6 needs this */
+ text-align:center;
+ }
+ .demo-description {
+ text-align:center;
+ padding:1.5em;
+ }
+ .demo-container {
+ background:#aaa;
+ width:80%;
+ height:80%;
+
+ text-align:left;
+ margin:0 auto;
+ position:relative;
+ padding:10px;
+ }
+ .demo {
+ background:#eee;
+ overflow:hidden;
+ position:relative;
+ height:100%;
+ /* IE6 needs this */
+ width: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;
+ cursor:move;
+ }
+ .ui-flipped-top {
+ border-top: 3px solid #000000;
+ }
+ .ui-flipped-bottom {
+ border-bottom: 3px solid #000000;
}
- .right:before {
- left: auto;
- right: 5px;
+ .ui-flipped-left {
+ border-left: 3px solid #000000;
}
- .bottom:before {
- content: "↓";
- top: auto;
- bottom: -19px;
+ .ui-flipped-right {
+ border-right: 3px solid #000000;
}
+ select, input {
+ margin-left: 15px;
+ }
+ .extra-margin {
+ margin: 0 15px 15px 0;
+ }
</style>
+ <script>
+ $(function() {
+ var within = $( ".demo" ),
+ positionable = $( ".positionable" );
+ function position() {
+ positionable.position({
+ of: $( "#parent" ),
+ my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+ at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+ offset: $( "#offset" ).val(),
+ within: within,
+ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+ });
+ }
+ $( ".demo" ).css("overflow","scroll");
+
+ positionable.css( "opacity", 0.5 );
+
+
+ $( "#parent" ).draggable({
+ drag: function() { position(); }
+ });
+
+ $("#within").click(function() {
+ within = within.is(".demo") ? $(window) : $(".demo");
+ position();
+ });
+
+ $("#margin").click(function() {
+ positionable.toggleClass( "extra-margin" );
+ position();
+ });
+
+ $( ":input" ).bind( "click keyup change", function() { position(); } );
+
+ position();
+ });
+ </script>
</head>
<body>
-<div id="container"></div>
-
-<input id="left-top" />
-<input id="left-center" />
-<input id="left-bottom" />
-<input id="center-top" />
-<input id="center-center" />
-<input id="center-bottom" />
-<input id="right-top" />
-<input id="right-center" />
-<input id="right-bottom" />
-
-<ul>
- <li><a href="#">Java</a></li>
- <li><a href="#">JavaScript</a></li>
- <li><a href="#">Perl</a></li>
- <li><a href="#">Ruby</a></li>
- <li><a href="#">C++</a></li>
- <li><a href="#">Python</a></li>
- <li><a href="#">C#</a></li>
-</ul>
+<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>
+
+ <form style="padding: 20px; margin-top: 75px;">
+ <h2>Position configuration:
+ <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" selected="selected">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" selected="selected">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>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>
+ <label for="within">within:</label>
+ <input id="within" type="checkbox" checked />
+ </div>
+ <div>
+ <label for="margin">extra margin:</label>
+ <input id="margin" type="checkbox" />
+ </div>
+ </form>
+
+</div><!-- End demo -->
+</div>
</body>
</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Position Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.css">
- <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
- <script src="../../../jquery-1.7.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>
- <script src="../../../ui/jquery.ui.menu.js"></script>
- <script>
- $(function() {
- function using( position, feedback ) {
- var angleRad = Math.atan2(
- feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2,
- feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2
- ) * 180 / Math.PI,
- angle = Math.round( angleRad * 100) / 100;
- $( this )
- .css( position )
- .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" )
- .css({
- "-webkit-transform": "rotate(" + angle + "deg)",
- "-moz-transform": "rotate(" + angle + "deg)",
- "-ms-transform": "rotate(" + angle + "deg)",
- "-o-transform": "rotate(" + angle + "deg)",
- "transform": "rotate(" + angle + "deg)"
- });
- }
-
- var element = $( ".element" ),
- target = $( "#target" ).position({
- my: "center",
- at: "center",
- of: window
- }),
- targetOffset = target.offset();
- oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
- leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
- rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
-
- $.each([
- "center top-100",
- "right+25 top-50",
- "right+75 top",
- "right+75 center",
- "right+75 bottom",
- "right+25 bottom+50",
- "center bottom+100",
- "left-25 bottom+50",
- "left-75 bottom",
- "left-75 center",
- "left-75 top",
- "left-25 top-50"
- ], function( index, direction ) {
- element.clone().insertAfter( target ).position({
- my: "center",
- at: direction,
- of: target,
- using: using
- });
- });
-
- element.width( 150 );
- $( document ).on( "mousemove", function( event ) {
- var base = {
- my: "left top",
- at: "left top",
- of: target,
- using: using
- };
- element.position( $.extend({
- offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
- }, base ));
- oppositeElement.position( $.extend({
- offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
- }, base ));
- leftElement.position( $.extend({
- offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
- }, base ));
- rightElement.position( $.extend({
- offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
- }, base ));
- });
- });
- </script>
- <style>
- #target, .element {
- position: absolute;
- border: 1px solid black;
- border-radius: 5px;
- width: 75px;
- height: 25px;
- padding: 5px;
- }
- #target {
- height: 75px;
- }
- </style>
-</head>
-<body>
-
-<div id="target">all around me</div>
-<div class="element"></div>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>Position Visual Test: Fit</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.7.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>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
- $(function() {
- var inputs = $("input");
- $("ul").insertAfter(inputs);
- inputs.each(function(index) {
- $(this).position({
- my: $(this).data("position"),
- at: $(this).data("position"),
- of: "#container"+index,
- collision: "none"
- });
- if(index < 3) {
- $(this).next().menu().position({
- my: "left top",
- at: "left bottom",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- if(index >= 3 && index < 6) {
- $(this).next().menu().position({
- my: "right top",
- at: "right bottom",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- if(index >= 6 && index < 9) {
- $(this).next().menu().position({
- my: "center top",
- at: "center bottom",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- if(index >= 9 && index < 12) {
- $(this).next().menu().position({
- my: "left top",
- at: "left bottom",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- if(index >= 12 && index < 15) {
- $(this).next().menu().position({
- my: "center center",
- at: "center center",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- if(index >= 15) {
- $(this).next().menu().position({
- my: "left bottom",
- at: "left top",
- of: this,
- within: "#container"+index,
- collision: "fit"
- });
- }
- });
- });
- </script>
- <style>
- input, .ui-menu { position: absolute; }
- .ui-menu { width: 300px; }
- #ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; }
- html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
- .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
- .container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
- </style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container3" class="container"></div>
-<div id="container4" class="container"></div>
-<div id="container5" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container6" class="container"></div>
-<div id="container7" class="container"></div>
-<div id="container8" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container9" class="container2"></div>
-<div id="container10" class="container2"></div>
-<div id="container11" class="container2"></div>
-<div style="clear:both;"></div>
-<div id="container12" class="container2"></div>
-<div id="container13" class="container2"></div>
-<div id="container14" class="container2"></div>
-<div style="clear:both;"></div>
-<div id="container15" class="container2"></div>
-<div id="container16" class="container2"></div>
-<div id="container17" class="container2"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
- <li><a href="#">Java</a></li>
- <li><a href="#">JavaScript</a></li>
- <li><a href="#">Perl</a></li>
- <li><a href="#">Ruby</a></li>
- <li><a href="#">C++</a></li>
- <li><a href="#">Python</a></li>
- <li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>Position Visual Test: Flip</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.7.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>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
- $(function() {
- var inputs = $("input");
- $("ul").insertAfter(inputs);
- inputs.each(function(index) {
- $(this).position({
- my: $(this).data("position"),
- at: $(this).data("position"),
- of: "#container"+index,
- collision: "none"
- });
- $(this).next().menu().position({
- my: "left top",
- at: "left bottom",
- of: this,
- within: "#container"+index
- });
- });
- });
- </script>
- <style>
- input, .ui-menu { position: absolute; }
- .ui-menu { width: 300px; }
- #ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; }
- html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
- .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
- </style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container3" class="container" style="width:300px;"></div>
-<div id="container4" class="container" style="width:300px;"></div>
-<div id="container5" class="container" style="width:300px;"></div>
-<div style="clear:both;"></div>
-<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left center" />
-<input data-position="center center" />
-<input data-position="right center" />
-<input data-position="left bottom" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
- <li><a href="#">Java</a></li>
- <li><a href="#">JavaScript</a></li>
- <li><a href="#">Perl</a></li>
- <li><a href="#">Ruby</a></li>
- <li><a href="#">C++</a></li>
- <li><a href="#">Python</a></li>
- <li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>Position Visual Test: FlipFit</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.7.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>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
- $(function() {
- var inputs = $("input");
- $("ul").insertAfter(inputs);
- inputs.each(function(index) {
- $(this).position({
- my: $(this).data("position"),
- at: $(this).data("position"),
- of: "#container"+index,
- collision: "none"
- });
- $(this).next().menu().position({
- my: index > 2 && index < 6 ? "right top" : "left top",
- at: index > 2 && index < 6 ? "right bottom" : "left bottom",
- of: this,
- within: "#container"+index,
- collision: "flipfit"
- });
- });
- });
- </script>
- <style>
- input, .ui-menu { position: absolute; }
- .ui-menu { width: 300px; }
- #ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; }
- #ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; }
- html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
- .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
- </style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container3" class="container"></div>
-<div id="container4" class="container"></div>
-<div id="container5" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container6" class="container" style="width:300px;"></div>
-<div id="container7" class="container" style="width:300px;"></div>
-<div id="container8" class="container" style="width:300px;"></div>
-<div style="clear:both;"></div>
-<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left center" />
-<input data-position="center center" />
-<input data-position="right center" />
-<input data-position="left bottom" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
- <li><a href="#">Java</a></li>
- <li><a href="#">JavaScript</a></li>
- <li><a href="#">Perl</a></li>
- <li><a href="#">Ruby</a></li>
- <li><a href="#">C++</a></li>
- <li><a href="#">Python</a></li>
- <li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
+++ /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.7.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>
- <script type="text/javascript">
- $(function() {
- $( "#elem" ).position({
- my: "right bottom",
- at: "right bottom",
- of: window,
- collision: "fit"
- });
- });
- </script>
- <style>
- #elem {
- position: absolute;
- top: 100px;
- left: 100px;
- width: 200px;
- height: 200px;
- box-shadow: 10px 10px 5px #888;
- -moz-box-shadow: 10px 10px 5px #888;
- -webkit-box-shadow: 10px 10px 5px #888;
- background-color: #aaa;
- margin: 15px;
- }
- </style>
-</head>
-<body>
-
-<div id="elem"></div>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Position Visual Test: Containing Element</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 src="../../../jquery-1.7.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>
-
- <style>
- html, body {
- height:100%;
- width:100%;
- margin:0;
- /* force scroll bar*/
- min-height:800px;
- min-width:800px;
-
- /* IE6 needs this */
- text-align:center;
- }
- .demo-description {
- text-align:center;
- padding:1.5em;
- }
- .demo-container {
- background:#aaa;
- width:80%;
- height:80%;
-
- text-align:left;
- margin:0 auto;
- position:relative;
- padding:10px;
- }
- .demo {
- background:#eee;
- overflow:hidden;
- position:relative;
- height:100%;
- /* IE6 needs this */
- width: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;
- cursor:move;
- }
- .ui-flipped-top {
- border-top: 3px solid #000000;
- }
- .ui-flipped-bottom {
- border-bottom: 3px solid #000000;
- }
- .ui-flipped-left {
- border-left: 3px solid #000000;
- }
- .ui-flipped-right {
- border-right: 3px solid #000000;
- }
- 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()
- });
- }
- $( ".demo" ).css("overflow","scroll");
-
- $( ".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 ) {
- var demo = $( ".demo" );
- $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) +
- " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) );
- 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" selected="selected">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" selected="selected">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>
projects / jquery-ui.git / commitdiff