mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Merge remote branch 'davidmurdoch/ticket-5645'
This commit is contained in:
Jörn Zaefferer
commit
433ed6eecf
@ -16,47 +16,54 @@
|
||||
<script src="../testsuite.js"></script>
|
||||
|
||||
<script src="position_core.js"></script>
|
||||
<script src="position_core_within.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
<div style="position:relative; z-index:2;">
|
||||
<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
elements smaller than 10px have a line-height set on them to avoid a bug in IE6
|
||||
.height() returns the greater of the height and line-height
|
||||
-->
|
||||
|
||||
<div id="qunit-fixture" style="top: 0; left: 0;">
|
||||
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
|
||||
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
|
||||
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
|
||||
<div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
|
||||
<div id="within-container">
|
||||
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
|
||||
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
|
||||
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
|
||||
|
||||
<div style="position: absolute; top: 0px; left: 0px">
|
||||
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top: 200px; left: 100px;">
|
||||
<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div style="position: absolute; top: 100px; left: 50px;">
|
||||
<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; height: 5000px; width: 5000px;"></div>
|
||||
|
||||
<div id="bug-5280" style="height: 30px; width: 201px;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top: 0px; left: 0px">
|
||||
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top: 200px; left: 100px;">
|
||||
<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div style="position: absolute; top: 100px; left: 50px;">
|
||||
<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
|
||||
<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; height: 5000px; width: 5000px;"></div>
|
||||
|
||||
<div id="bug-5280" style="height: 30px; width: 201px;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -64,7 +64,6 @@ test( "positions", function() {
|
||||
center: 3,
|
||||
right: 6,
|
||||
top: 0,
|
||||
center: 3,
|
||||
bottom: 6
|
||||
};
|
||||
var start = { left: 4, top: 4 };
|
||||
@ -316,6 +315,7 @@ test( "collision: fit, window scrolled", function() {
|
||||
if ( scrollTopSupport() ) {
|
||||
var win = $( window );
|
||||
win.scrollTop( 300 ).scrollLeft( 200 );
|
||||
|
||||
collisionTest({
|
||||
collision: "fit",
|
||||
at: "left-100 top-100"
|
||||
@ -324,6 +324,7 @@ test( "collision: fit, window scrolled", function() {
|
||||
collision: "fit",
|
||||
at: "right+100 bottom+100"
|
||||
}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
|
||||
|
||||
win.scrollTop( 0 ).scrollLeft( 0 );
|
||||
}
|
||||
});
|
||||
@ -351,7 +352,7 @@ test( "collision: flip, with offset", function() {
|
||||
|
||||
collisionTest2({
|
||||
collision: "flip",
|
||||
at: "left-2 top-3",
|
||||
at: "left-2 top-3"
|
||||
}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" );
|
||||
});
|
||||
|
||||
|
||||
441
tests/unit/position/position_core_within.js
Normal file
441
tests/unit/position/position_core_within.js
Normal file
@ -0,0 +1,441 @@
|
||||
(function( $ ) {
|
||||
|
||||
function scrollTopSupport() {
|
||||
$( window ).scrollTop( 1 );
|
||||
return $( window ).scrollTop() === 1;
|
||||
}
|
||||
|
||||
module( "position - within", {
|
||||
setup: function(){
|
||||
$("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}).show();
|
||||
}
|
||||
});
|
||||
|
||||
var addTop = -20,
|
||||
addLeft = -20;
|
||||
|
||||
$.fn.addOffsets = function() {
|
||||
var elOffset = this.offset(),
|
||||
offset = $("#within-container").offset();
|
||||
|
||||
elOffset.top -= offset.top;
|
||||
elOffset.left -= offset.left;
|
||||
|
||||
return {top: elOffset.top - offset.top, left: elOffset.left - offset.left };
|
||||
};
|
||||
|
||||
test( "my, at, of", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left top",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left",
|
||||
at: "bottom",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left foo",
|
||||
at: "bar baz",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" );
|
||||
});
|
||||
|
||||
test( "multiple elements", function() {
|
||||
var elements = $( "#el1, #el2" );
|
||||
var result = elements.position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: "#parent",
|
||||
collision: "none",
|
||||
within: $("#within-container")
|
||||
});
|
||||
|
||||
same( result, elements );
|
||||
var expected = { top: addTop + 10, left: addLeft + 4 };
|
||||
elements.each(function() {
|
||||
same( $( this ).addOffsets(), expected );
|
||||
});
|
||||
});
|
||||
|
||||
test( "positions", function() {
|
||||
var definitions = [];
|
||||
var offsets = {
|
||||
left: 0,
|
||||
center: 3,
|
||||
right: 6,
|
||||
top: 0,
|
||||
bottom: 6
|
||||
};
|
||||
var start = { left: 4, top: 4 };
|
||||
$.each( [ 0, 1 ], function( my ) {
|
||||
$.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
|
||||
$.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
|
||||
definitions.push({
|
||||
my: my ? horizontal + " " + vertical : "left top",
|
||||
at: !my ? horizontal + " " + vertical : "left top",
|
||||
result: {
|
||||
top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]),
|
||||
left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ])
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
var el = $( "#el1" );
|
||||
$.each( definitions, function( index, definition ) {
|
||||
el.position({
|
||||
my: definition.my,
|
||||
at: definition.at,
|
||||
of: "#parent",
|
||||
collision: "none",
|
||||
within: $("#within-container")
|
||||
});
|
||||
same( el.addOffsets(), definition.result,
|
||||
"Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) );
|
||||
});
|
||||
});
|
||||
|
||||
test( "of", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left top",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: $( "#parentx"),
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left top",
|
||||
of: $( "#parentx" )[ 0 ],
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" );
|
||||
|
||||
var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left top",
|
||||
of: event,
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).offset(), {
|
||||
top: 300,
|
||||
left: 200
|
||||
}, "event - left top, left top" );
|
||||
|
||||
event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "right bottom",
|
||||
of: event,
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).offset(), {
|
||||
top: 600,
|
||||
left: 400
|
||||
}, "event - left top, right bottom" );
|
||||
});
|
||||
|
||||
test( "within:offsets", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left+10 bottom+10",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left+10 top-10",
|
||||
at: "left bottom",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left top",
|
||||
at: "left+50% bottom-10%",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" );
|
||||
|
||||
$( "#elx" ).position({
|
||||
my: "left-30% top+50%",
|
||||
at: "left bottom",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
});
|
||||
same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" );
|
||||
});
|
||||
|
||||
test( "using", function() {
|
||||
expect( 6 );
|
||||
|
||||
var within = $("#within-container");
|
||||
|
||||
var count = 0,
|
||||
elems = $( "#el1, #el2" ),
|
||||
expectedPosition = { top: addTop + 40, left: addLeft + 40 },
|
||||
originalPosition = elems.position({
|
||||
my: "right bottom",
|
||||
at: "rigt bottom",
|
||||
of: "#parentx",
|
||||
collision: "none",
|
||||
within: within
|
||||
}).addOffsets();
|
||||
|
||||
elems.position({
|
||||
my: "left top",
|
||||
at: "left top",
|
||||
of: "#parentx",
|
||||
using: function( position ) {
|
||||
position.top -= within.offset().top;
|
||||
position.left -= within.offset().left;
|
||||
same( this, elems[ count ], "correct context for call #" + count );
|
||||
same( position, expectedPosition, "correct position for call #" + count );
|
||||
count++;
|
||||
},
|
||||
within: within
|
||||
});
|
||||
|
||||
elems.each(function() {
|
||||
same( $( this ).addOffsets(), originalPosition, "elements not moved" );
|
||||
});
|
||||
});
|
||||
|
||||
function collisionTest( config, result, msg ) {
|
||||
var within = $("#within-container");
|
||||
|
||||
var elem = $( "#elx" ).position( $.extend({
|
||||
my: "left top",
|
||||
at: "right bottom",
|
||||
of: within[0],
|
||||
within: within
|
||||
}, config ) );
|
||||
|
||||
same( elem.addOffsets(), result, msg );
|
||||
}
|
||||
|
||||
function collisionTest2( config, result, msg ) {
|
||||
collisionTest( $.extend({
|
||||
my: "right bottom",
|
||||
at: "left top"
|
||||
}, config ), result, msg );
|
||||
}
|
||||
|
||||
test( "collision: fit, no offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "fit"
|
||||
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit"
|
||||
}, { top: addTop + 0, left: addLeft + 0 }, "left top" );
|
||||
});
|
||||
|
||||
|
||||
test( "collision: fit, with offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "fit",
|
||||
at: "right+2 bottom+3"
|
||||
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom");
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit",
|
||||
at: "left+2 top+3"
|
||||
}, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit",
|
||||
at: "left-2 top-3"
|
||||
}, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" );
|
||||
});
|
||||
|
||||
test( "collision: fit, within scrolled", function() {
|
||||
if ( scrollTopSupport() ) {
|
||||
var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"});
|
||||
within.scrollTop( 300 ).scrollLeft( 150 );
|
||||
|
||||
collisionTest({
|
||||
collision: "fit",
|
||||
at: "left-100 top-100"
|
||||
}, { top: addTop, left: addLeft }, "top left" );
|
||||
collisionTest2({
|
||||
collision: "fit",
|
||||
at: "right+100 bottom+100"
|
||||
}, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
|
||||
within.scrollTop( 0 ).scrollLeft( 0 );
|
||||
}
|
||||
});
|
||||
|
||||
test( "collision: flip, no offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "flip"
|
||||
}, { top: addTop + -10, left: addLeft + -10 }, "left top" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "flip"
|
||||
}, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" );
|
||||
});
|
||||
|
||||
test( "collision: flip, with offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "flip",
|
||||
at: "right+2 bottom+3"
|
||||
}, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "flip",
|
||||
at: "left+2 top+3"
|
||||
}, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "flip",
|
||||
at: "left-2 top-3"
|
||||
}, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" );
|
||||
});
|
||||
|
||||
test( "collision: none, no offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "none"
|
||||
}, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "none"
|
||||
}, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" );
|
||||
});
|
||||
|
||||
test( "collision: none, with offset", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
collisionTest({
|
||||
collision: "none",
|
||||
at: "right+2 bottom+3"
|
||||
}, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "none",
|
||||
at: "left+2 top+3"
|
||||
}, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "none",
|
||||
at: "left-2 top-3"
|
||||
}, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" );
|
||||
});
|
||||
|
||||
test( "collision: fit, with margin", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
$( "#elx" ).css( "margin", 10 );
|
||||
|
||||
collisionTest({
|
||||
collision: "fit"
|
||||
}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit"
|
||||
}, { top: addTop + 10, left: addLeft + 10 }, "left top" );
|
||||
|
||||
$( "#elx" ).css({
|
||||
"margin-left": 5,
|
||||
"margin-top": 5
|
||||
});
|
||||
|
||||
collisionTest({
|
||||
collision: "fit"
|
||||
}, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit"
|
||||
}, { top: addTop + 5, left: addLeft + 5 }, "left top" );
|
||||
|
||||
$( "#elx" ).css({
|
||||
"margin-right": 15,
|
||||
"margin-bottom": 15
|
||||
});
|
||||
|
||||
collisionTest({
|
||||
collision: "fit"
|
||||
}, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "fit"
|
||||
}, { top: addTop + 5, left: addLeft + 5 }, "left top" );
|
||||
});
|
||||
|
||||
test( "collision: flip, with margin", function() {
|
||||
var within = $("#within-container");
|
||||
|
||||
$( "#elx" ).css( "margin", 10 );
|
||||
|
||||
collisionTest({
|
||||
collision: "flip",
|
||||
at: "left top"
|
||||
}, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" );
|
||||
|
||||
collisionTest2({
|
||||
collision: "flip",
|
||||
at: "right bottom"
|
||||
}, { top: addTop + 0, left: addLeft + 0 }, "right bottom" );
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
@ -35,7 +35,7 @@
|
||||
<style>
|
||||
input, .ui-menu { position: absolute; }
|
||||
.ui-menu { width: 200px; }
|
||||
html, body { width: 99%; height: 99% }
|
||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
||||
#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
189
tests/visual/position/position_within.html
Normal file
189
tests/visual/position/position_within.html
Normal file
@ -0,0 +1,189 @@
|
||||
<!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 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;
|
||||
/* 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;
|
||||
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()
|
||||
});
|
||||
}
|
||||
$( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
|
||||
|
||||
$( ".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">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>
|
||||
112
ui/jquery.ui.position.js
vendored
112
ui/jquery.ui.position.js
vendored
@ -19,6 +19,34 @@ var rhorizontal = /left|center|right/,
|
||||
center = "center",
|
||||
_position = $.fn.position;
|
||||
|
||||
$.position = {
|
||||
scrollbarWidth : function() {
|
||||
var div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ),
|
||||
innerDiv = div.children()[0],
|
||||
w1, w2;
|
||||
$( "body" ).append( div );
|
||||
w1 = innerDiv.offsetWidth;
|
||||
div.css( "overflow", "scroll" );
|
||||
|
||||
w2 = innerDiv.offsetWidth;
|
||||
|
||||
if ( w1 === w2 ) {
|
||||
w2 = div[0].clientWidth;
|
||||
}
|
||||
|
||||
div.remove();
|
||||
|
||||
return w1 - w2;
|
||||
},
|
||||
getScrollInfo : function( within ) {
|
||||
var that = within[0],
|
||||
scrollHeight = within.height() < that.scrollHeight,
|
||||
scrollWidth = within.width() < that.scrollWidth,
|
||||
scrollbarWidth = $.position.scrollbarWidth();
|
||||
return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 };
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.position = function( options ) {
|
||||
if ( !options || !options.of ) {
|
||||
return _position.apply( this, arguments );
|
||||
@ -28,6 +56,7 @@ $.fn.position = function( options ) {
|
||||
options = $.extend( {}, options );
|
||||
|
||||
var target = $( options.of ),
|
||||
within = $( options.within || window ),
|
||||
targetElem = target[0],
|
||||
collision = ( options.collision || "flip" ).split( " " ),
|
||||
offsets = {},
|
||||
@ -110,7 +139,7 @@ $.fn.position = function( options ) {
|
||||
parseInt( offsets.at[ 1 ], 10 ) *
|
||||
( rpercent.test( offsets.at[ 1 ] ) ? targetHeight / 100 : 1 )
|
||||
];
|
||||
basePosition.left += atOffset[ 0 ],
|
||||
basePosition.left += atOffset[ 0 ];
|
||||
basePosition.top += atOffset[ 1 ];
|
||||
|
||||
return this.each(function() {
|
||||
@ -119,10 +148,11 @@ $.fn.position = function( options ) {
|
||||
elemHeight = elem.outerHeight(),
|
||||
marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0,
|
||||
marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0,
|
||||
scrollInfo = $.position.getScrollInfo( within ),
|
||||
collisionWidth = elemWidth + marginLeft +
|
||||
( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ),
|
||||
( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width,
|
||||
collisionHeight = elemHeight + marginTop +
|
||||
( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ),
|
||||
( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ) + scrollInfo.height,
|
||||
position = $.extend( {}, basePosition ),
|
||||
myOffset = [
|
||||
parseInt( offsets.my[ 0 ], 10 ) *
|
||||
@ -168,7 +198,8 @@ $.fn.position = function( options ) {
|
||||
collisionHeight: collisionHeight,
|
||||
offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ],
|
||||
my: options.my,
|
||||
at: options.at
|
||||
at: options.at,
|
||||
within: within
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -183,32 +214,40 @@ $.fn.position = function( options ) {
|
||||
$.ui.position = {
|
||||
fit: {
|
||||
left: function( position, data ) {
|
||||
var win = $( window ),
|
||||
overLeft = win.scrollLeft() - data.collisionPosition.left,
|
||||
overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
|
||||
var within = data.within,
|
||||
win = $( window ),
|
||||
isWindow = $.isWindow( data.within[0] ),
|
||||
withinOffset = isWindow ? win.scrollLeft() : within.offset().left,
|
||||
outerWidth = isWindow ? win.width() : within.outerWidth(),
|
||||
overLeft = withinOffset - data.collisionPosition.left,
|
||||
overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset;
|
||||
|
||||
// element is wider than window or too far left -> align with left edge
|
||||
if ( data.collisionWidth > win.width() || overLeft > 0 ) {
|
||||
position.left = position.left + overLeft;
|
||||
if ( data.collisionWidth > outerWidth || overLeft > 0 ) {
|
||||
position.left += overLeft;
|
||||
// too far right -> align with right edge
|
||||
} else if ( overRight > 0 ) {
|
||||
position.left = position.left - overRight;
|
||||
position.left -= overRight;
|
||||
// adjust based on position and margin
|
||||
} else {
|
||||
position.left = Math.max( position.left - data.collisionPosition.left, position.left );
|
||||
}
|
||||
},
|
||||
top: function( position, data ) {
|
||||
var win = $( window ),
|
||||
overTop = win.scrollTop() - data.collisionPosition.top,
|
||||
overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
|
||||
var within = data.within,
|
||||
win = $( window ),
|
||||
isWindow = $.isWindow( data.within[0] ),
|
||||
withinOffset = isWindow ? win.scrollTop() : within.offset().top,
|
||||
outerHeight = isWindow ? win.height() : within.outerHeight(),
|
||||
overTop = withinOffset - data.collisionPosition.top,
|
||||
overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset;
|
||||
|
||||
// element is taller than window or too far up -> align with top edge
|
||||
if ( data.collisionHeight > win.height() || overTop > 0 ) {
|
||||
position.top = position.top + overTop;
|
||||
if ( data.collisionHeight > outerHeight || overTop > 0 ) {
|
||||
position.top += overTop;
|
||||
// too far down -> align with bottom edge
|
||||
} else if ( overBottom > 0 ) {
|
||||
position.top = position.top - overBottom;
|
||||
position.top -= overBottom;
|
||||
// adjust based on position and margin
|
||||
} else {
|
||||
position.top = Math.max( position.top - data.collisionPosition.top, position.top );
|
||||
@ -220,8 +259,15 @@ $.ui.position = {
|
||||
if ( data.at[ 0 ] === center ) {
|
||||
return;
|
||||
}
|
||||
var win = $( window ),
|
||||
over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(),
|
||||
|
||||
var within = data.within,
|
||||
win = $( window ),
|
||||
isWindow = $.isWindow( data.within[0] ),
|
||||
withinOffset = isWindow ? 0 : within.offset().left,
|
||||
outerWidth = isWindow ? within.width() : within.outerWidth(),
|
||||
overLeft = data.collisionPosition.left - withinOffset,
|
||||
overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset,
|
||||
left = data.my[ 0 ] === "left",
|
||||
myOffset = data.my[ 0 ] === "left" ?
|
||||
-data.elemWidth :
|
||||
data.my[ 0 ] === "right" ?
|
||||
@ -231,19 +277,23 @@ $.ui.position = {
|
||||
data.targetWidth :
|
||||
-data.targetWidth,
|
||||
offset = -2 * data.offset[ 0 ];
|
||||
position.left += data.collisionPosition.left < 0 ?
|
||||
myOffset + atOffset + offset :
|
||||
over > 0 ?
|
||||
myOffset + atOffset + offset :
|
||||
0;
|
||||
if ( overLeft < 0 || overRight > 0 ) {
|
||||
position.left += myOffset + atOffset + offset;
|
||||
}
|
||||
},
|
||||
top: function( position, data ) {
|
||||
if ( data.at[ 1 ] === center ) {
|
||||
return;
|
||||
}
|
||||
var win = $( window ),
|
||||
over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(),
|
||||
myOffset = data.my[ 1 ] === "top" ?
|
||||
var within = data.within,
|
||||
win = $( window ),
|
||||
isWindow = $.isWindow( data.within[0] ),
|
||||
withinOffset = isWindow ? 0 : within.offset().top,
|
||||
outerHeight = isWindow ? within.height() : within.outerHeight(),
|
||||
overTop = data.collisionPosition.top - withinOffset,
|
||||
overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset,
|
||||
top = data.my[ 1 ] === "top",
|
||||
myOffset = top ?
|
||||
-data.elemHeight :
|
||||
data.my[ 1 ] === "bottom" ?
|
||||
data.elemHeight :
|
||||
@ -252,11 +302,9 @@ $.ui.position = {
|
||||
data.targetHeight :
|
||||
-data.targetHeight,
|
||||
offset = -2 * data.offset[ 1 ];
|
||||
position.top += data.collisionPosition.top < 0 ?
|
||||
myOffset + atOffset + offset :
|
||||
over > 0 ?
|
||||
myOffset + atOffset + offset :
|
||||
0;
|
||||
if ( overTop < 0 || overBottom > 0) {
|
||||
position.top += myOffset + atOffset + offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -297,4 +345,4 @@ if ( $.uiBackCompat !== false ) {
|
||||
}( jQuery ) );
|
||||
}
|
||||
|
||||
}( jQuery ) );
|
||||
}( jQuery ) );
|
||||
Loading…
Reference in New Issue
Block a user