"Effects": "effects/effects.html",
"Menu": "menu/menu.html",
"Position": "position/position.html",
- "Position_deprecated": "position/position_deprecated.html",
"Progressbar": "progressbar/progressbar.html",
//"resizable/resizable.html",
//"selectable/selectable.html",
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
- offset: $( "#offset" ).val(),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
<option value="bottom">bottom</option>
</select>
</div>
- <div style="padding-bottom: 20px;">
- <b>offset:</b>
- <input id="offset">
- </div>
<div style="padding-bottom: 20px;">
<b>collision:</b>
<select id="collision_horizontal">
"effects/effects.html",
"menu/menu.html",
"position/position.html",
- "position/position_deprecated.html",
"progressbar/progressbar.html",
//"resizable/resizable.html",
//"selectable/selectable.html",
"effects/effects.html",
"menu/menu.html",
"position/position.html",
- "position/position_deprecated.html",
"progressbar/progressbar.html",
//"resizable/resizable.html",
//"selectable/selectable.html",
<title>jQuery UI Position Test Suite</title>
<script src="../../jquery.js"></script>
- <script>
- $.uiBackCompat = false;
- </script>
<link rel="stylesheet" href="../../../external/qunit.css">
<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Position Test Suite</title>
-
- <script src="../../jquery.js"></script>
-
-
-
- <link rel="stylesheet" href="../../../external/qunit.css">
- <script src="../../../external/qunit.js"></script>
- <script src="../../jquery.simulate.js"></script>
- <script src="../testsuite.js"></script>
- <script>
- TestHelpers.loadResources({
- js: [ "ui/jquery.ui.position.js" ]
- });
- </script>
-
- <script src="position_core.js"></script>
- <script src="position_deprecated.js"></script>
- <script src="../swarminject.js"></script>
-</head>
-<body>
-<div id="qunit" style="position:relative; z-index:2;"></div>
-
-<!--
-elements smaller than 20px 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; z-index:1">
- <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="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div>
-
- <div id="scrollx" 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; height: 5000px; width: 5000px;"></div>
-
- <div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
- <div id="fractions-element"></div>
- </div>
-
- <div id="bug-5280" style="height: 30px; width: 201px;">
- <div style="width: 50px; height: 10px;"></div>
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-(function( $ ) {
-
-test( "offset", function() {
- expect( 3 );
- $( "#elx" ).position({
- my: "left top",
- at: "left bottom",
- of: "#parentx",
- offset: "10",
- collision: "none"
- });
- deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "single value" );
-
- $( "#elx" ).position({
- my: "left top",
- at: "left bottom",
- of: "#parentx",
- offset: "5 -3",
- collision: "none"
- });
- deepEqual( $( "#elx" ).offset(), { top: 57, left: 45 }, "two values" );
-
- $( "#elx" ).position({
- my: "left top",
- at: "left bottom",
- of: "#parentx",
- offset: "5px -3px",
- collision: "none"
- });
- deepEqual( $( "#elx" ).offset(), { top: 57, left: 45 }, "with units" );
-});
-
-}( jQuery ) );
"git"
],
additionalTests = {
- position: [ "position_deprecated.html" ]
+ // component: [ "other_test.html" ]
};
window.testAllVersions = function( widget ) {
});
element.width( 150 );
- $( document ).on( "mousemove", function( event ) {
- var base = {
+ function positionWithOffset( horizontal, vertical ) {
+ return {
my: "left top",
- at: "left top",
+ at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
+ "top" + (vertical < 0 ? vertical : "+" + vertical),
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) );
+ };
+ $( document ).on( "mousemove", function( event ) {
+ element.position( positionWithOffset(
+ event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
+ oppositeElement.position( positionWithOffset(
+ -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
+ leftElement.position( positionWithOffset(
+ -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
+ rightElement.position( positionWithOffset(
+ 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
});
});
</script>
tooltipClass: "ui-state-highlight",
position: {
my: "center top",
- at: "center bottom",
- offset: "0 10"
+ at: "center bottom+10"
}
});
$( "#buttons" ).tooltip({
position: {
my: "center bottom",
- at: "center top",
- offset: "0 -5"
+ at: "center top-5"
}
});
testElementParent.removeChild( testElement );
})();
-// DEPRECATED
-if ( $.uiBackCompat !== false ) {
- // offset option
- (function( $ ) {
- var _position = $.fn.position;
- $.fn.position = function( options ) {
- if ( !options || !options.offset ) {
- return _position.call( this, options );
- }
- var offset = options.offset.split( " " ),
- at = options.at.split( " " );
- if ( offset.length === 1 ) {
- offset[ 1 ] = offset[ 0 ];
- }
- if ( /^\d/.test( offset[ 0 ] ) ) {
- offset[ 0 ] = "+" + offset[ 0 ];
- }
- if ( /^\d/.test( offset[ 1 ] ) ) {
- offset[ 1 ] = "+" + offset[ 1 ];
- }
- if ( at.length === 1 ) {
- if ( /left|center|right/.test( at[ 0 ] ) ) {
- at[ 1 ] = "center";
- } else {
- at[ 1 ] = at[ 0 ];
- at[ 0 ] = "center";
- }
- }
- return _position.call( this, $.extend( options, {
- at: at[ 0 ] + offset[ 0 ] + " " + at[ 1 ] + offset[ 1 ],
- offset: undefined
- } ) );
- };
- }( jQuery ) );
-}
-
}( jQuery ) );