mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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
This commit is contained in:
Jörn Zaefferer
parent
92c74818ff
commit
479530bb61
@ -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;
|
||||
|
||||
120
tests/visual/position/position_notification.html
Normal file
120
tests/visual/position/position_notification.html
Normal file
@ -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>
|
||||
38
ui/jquery.ui.position.js
vendored
38
ui/jquery.ui.position.js
vendored
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user