aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJörn Zaefferer <joern.zaefferer@gmail.com>2012-04-10 18:11:28 +0200
committerJörn Zaefferer <joern.zaefferer@gmail.com>2012-04-10 18:15:30 +0200
commit479530bb61f3c40ef9360613a0a84baf1a14b87b (patch)
tree2a4a41cbb894b6bd4e95ec269403b7616bdfea55
parent92c74818ff73ce6534a34fb3a83a0cb928c4bb3f (diff)
downloadjquery-ui-479530bb61f3c40ef9360613a0a84baf1a14b87b.tar.gz
jquery-ui-479530bb61f3c40ef9360613a0a84baf1a14b87b.zip
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage
Diffstat
-rw-r--r--tests/visual/position/position.html16
-rw-r--r--tests/visual/position/position_notification.html120
-rw-r--r--ui/jquery.ui.position.js38
3 files changed, 152 insertions, 22 deletions
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index b9b769d9b..89d991231 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -17,16 +17,24 @@
$("ul").insertAfter(inputs);
$(window).resize(function() {
inputs.each(function() {
- $(this).position({
+ var input = $(this).position({
my: this.id.replace(/-/, " "),
at: this.id.replace(/-/, " "),
of: "#container",
collision: "none"
});
- $(this).next().menu().position({
+ var menu = $(this).next().menu()
+ menu.position({
my: "left top+20",
at: "left bottom",
of: this,
+ using: function( position ) {
+ input.val(position.horizontal + " " + position.vertical)
+ $(this).offset( position )
+ .removeClass("left right top bottom")
+ .addClass(position.horizontal)
+ .addClass(position.vertical);
+ }
});
});
}).resize();
@@ -44,11 +52,11 @@
top: -22px;
left: 5px;
}
- .ui-flipped-left:before {
+ .right:before {
left: auto;
right: 5px;
}
- .ui-flipped-top:before {
+ .bottom:before {
content: "↓";
top: auto;
bottom: -19px;
diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_notification.html
new file mode 100644
index 000000000..d87c506ca
--- /dev/null
+++ b/tests/visual/position/position_notification.html
@@ -0,0 +1,120 @@
+<!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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript">
+ $(function() {
+ var target = $("#target").position({
+ my: "center",
+ at: "center",
+ of: window
+ });
+ var element = $(".element");
+ $.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: function( position ) {
+ $(this).offset( position );
+ $(this).text(position.horizontal + " " + position.vertical + " " + position.important)
+ $(this)
+ .removeClass("left right top bottom")
+ .addClass(position.horizontal)
+ .addClass(position.vertical)
+ .addClass(position.important);
+ }
+ })
+ });
+ element.remove();
+ });
+ </script>
+ <style>
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ }
+ #target {
+ height: 75px;
+ }
+ .element:before {
+ font-size: 12pt;
+ content: "↑";
+ position: absolute;
+ top: -19px;
+ left: 5px;
+ }
+ .right:before {
+ left: auto;
+ right: 5px;
+ }
+ .bottom:before {
+ content: "↓";
+ top: auto;
+ bottom: -19px;
+ }
+ .center:before {
+ left: 50%;
+ right: auto;
+ }
+ .middle:before {
+ top: 50%;
+ bottom: auto;
+ }
+ .horizontal:before {
+ height: 10px;
+ top: 50%;
+ margin-top: -8px;
+ bottom: auto;
+ left: -18px;
+ right: auto;
+ content: "←";
+ }
+ .right.horizontal:before {
+ left: auto;
+ right: -18px;
+ content: "→";
+ }
+ .bottom.horizontal:before {
+ top: auto;
+ bottom: 5px;
+ }
+ .top.horizontal:before {
+ top: 5px;
+ }
+ </style>
+</head>
+<body>
+
+ <div id="target">all around me</div>
+
+ <div class="element"></div>
+
+</body>
+</html>
diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js
index 95b8b460d..003e43c3f 100644
--- a/ui/jquery.ui.position.js
+++ b/ui/jquery.ui.position.js
@@ -216,6 +216,26 @@ $.fn.position = function( options ) {
if ( $.fn.bgiframe ) {
elem.bgiframe();
}
+ var using = options.using;
+ if ( using ) {
+ // we have to proxy, as jQuery.offset.setOffset throws away other props then left/top
+ options.using = function( props ) {
+ // can't use basePosition, as that gets modified
+ var targetOffset = target.offset(),
+ left = targetOffset.left - props.left,
+ right = (targetOffset.left + targetWidth) - (props.left + elemWidth),
+ top = targetOffset.top - props.top,
+ bottom = (targetOffset.top + targetHeight) - (props.top + elemHeight);
+ props.horizontal = right < 0 ? "left" : left > 0 ? "right" : "center";
+ props.vertical = bottom < 0 ? "top" : top > 0 ? "bottom" : "middle";
+ if (Math.max(Math.abs(left), Math.abs(right)) > Math.max(Math.abs(top), Math.abs(bottom))) {
+ props.important = "horizontal";
+ } else {
+ props.important = "vertical";
+ }
+ using.apply( this, arguments );
+ };
+ }
elem.offset( $.extend( position, { using: options.using } ) );
});
};
@@ -309,9 +329,6 @@ $.ui.position = {
return;
}
- data.elem
- .removeClass( "ui-flipped-left ui-flipped-right" );
-
var within = data.within,
win = $( window ),
isWindow = $.isWindow( data.within[0] ),
@@ -337,18 +354,12 @@ $.ui.position = {
if ( overLeft < 0 ) {
newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth - outerWidth - withinOffset;
if ( newOverRight < 0 || newOverRight < Math.abs( overLeft ) ) {
- data.elem
- .addClass( "ui-flipped-right" );
-
position.left += myOffset + atOffset + offset;
}
}
else if ( overRight > 0 ) {
newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft;
if ( newOverLeft > 0 || Math.abs( newOverLeft ) < overRight ) {
- data.elem
- .addClass( "ui-flipped-left" );
-
position.left += myOffset + atOffset + offset;
}
}
@@ -358,9 +369,6 @@ $.ui.position = {
return;
}
- data.elem
- .removeClass( "ui-flipped-top ui-flipped-bottom" );
-
var within = data.within,
win = $( window ),
isWindow = $.isWindow( data.within[0] ),
@@ -385,18 +393,12 @@ $.ui.position = {
if ( overTop < 0 ) {
newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight - outerHeight - withinOffset;
if ( ( position.top + myOffset + atOffset + offset) > overTop && ( newOverBottom < 0 || newOverBottom < Math.abs( overTop ) ) ) {
- data.elem
- .addClass( "ui-flipped-bottom" );
-
position.top += myOffset + atOffset + offset;
}
}
else if ( overBottom > 0 ) {
newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop;
if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || Math.abs( newOverTop ) < overBottom ) ) {
- data.elem
- .addClass( "ui-flipped-top" );
-
position.top += myOffset + atOffset + offset;
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-06 02:44:27 +0000