library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Position: Improve feedback API by giving the center/middle position more weight. Also removed themeswitcher from test pages, now load faster

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-04-12 01:32:30 +02:00
parent 260261255b
commit d077f9b360
7 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tests/visual/position/position.html
View File

@ -10,7 +10,6 @@
<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 inputs = $("input");
@ -25,13 +24,14 @@
});
var menu = $(this).next().menu()
menu.position({
my: "left top+20",
my: "left+30 top+20",
at: "left bottom",
of: this,
using: function( position, feedback ) {
input.val(feedback.horizontal + " " + feedback.vertical)
$(this).offset( position )
.removeClass("left right top bottom")
$(this).offset( position );
$(this)
.removeClass("left right top bottom center middle")
.addClass(feedback.horizontal)
.addClass(feedback.vertical);
}

23
tests/visual/position/position_feedback.html
View File

@ -10,7 +10,6 @@
<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() {
function using( position, feedback ) {
@ -52,8 +51,14 @@
var targetOffset = target.offset();
var oppositeElement = element.clone().width(50).appendTo('body');
var leftElement = element.clone().width(50).height(150).appendTo('body');
var rightElement = element.clone().height(150).width(150).appendTo('body');
element.width(150);
$(document).on( "mousemove", function(event) {
// TODO explore allowing multiple option sets as argument to position
// .position(base, custom)
// should be pretty useful for plugins, which always have base options and user overrides
// first arg is required, if it looks good, look for argmuments.length > 1
element.position({
my: "left top",
at: "left top",
@ -68,7 +73,21 @@
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)),
using: using
});
} )
leftElement.position({
my: "left top",
at: "left top",
of: target,
offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top)),
using: using
});
rightElement.position({
my: "left top",
at: "left top",
of: target,
offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top)),
using: using
});
});
});
</script>
<style>

1
tests/visual/position/position_fit.html
View File

@ -10,7 +10,6 @@
<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 inputs = $("input");

1
tests/visual/position/position_flip.html
View File

@ -10,7 +10,6 @@
<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 inputs = $("input");

1
tests/visual/position/position_flipfit.html
View File

@ -10,7 +10,6 @@
<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 inputs = $("input");

1
tests/visual/position/position_margin.html
View File

@ -9,7 +9,6 @@
<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="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
$( "#elem" ).position({

6
ui/jquery.ui.position.js vendored
View File

@ -232,6 +232,12 @@ $.fn.position = function( options ) {
horizontal: right < 0 ? "left" : left > 0 ? "right" : "center",
vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle"
};
if ( Math.abs( left + right ) < targetWidth ) {
feedback.horizontal = "center";
}
if ( Math.abs( top + bottom ) < targetHeight ) {
feedback.vertical = "middle";
}
if ( Math.max( Math.abs( left ), Math.abs( right ) ) > Math.max( Math.abs( top ), Math.abs( bottom ) ) ) {
feedback.important = "horizontal";
} else {