mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Position: Improve feedback API by giving the center/middle position more weight. Also removed themeswitcher from test pages, now load faster
This commit is contained in:
parent
260261255b
commit
d077f9b360
@ -10,7 +10,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.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.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
var inputs = $("input");
|
var inputs = $("input");
|
||||||
@ -25,13 +24,14 @@
|
|||||||
});
|
});
|
||||||
var menu = $(this).next().menu()
|
var menu = $(this).next().menu()
|
||||||
menu.position({
|
menu.position({
|
||||||
my: "left top+20",
|
my: "left+30 top+20",
|
||||||
at: "left bottom",
|
at: "left bottom",
|
||||||
of: this,
|
of: this,
|
||||||
using: function( position, feedback ) {
|
using: function( position, feedback ) {
|
||||||
input.val(feedback.horizontal + " " + feedback.vertical)
|
input.val(feedback.horizontal + " " + feedback.vertical)
|
||||||
$(this).offset( position )
|
$(this).offset( position );
|
||||||
.removeClass("left right top bottom")
|
$(this)
|
||||||
|
.removeClass("left right top bottom center middle")
|
||||||
.addClass(feedback.horizontal)
|
.addClass(feedback.horizontal)
|
||||||
.addClass(feedback.vertical);
|
.addClass(feedback.vertical);
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.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.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
function using( position, feedback ) {
|
function using( position, feedback ) {
|
||||||
@ -52,8 +51,14 @@
|
|||||||
|
|
||||||
var targetOffset = target.offset();
|
var targetOffset = target.offset();
|
||||||
var oppositeElement = element.clone().width(50).appendTo('body');
|
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);
|
element.width(150);
|
||||||
$(document).on( "mousemove", function(event) {
|
$(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({
|
element.position({
|
||||||
my: "left top",
|
my: "left top",
|
||||||
at: "left top",
|
at: "left top",
|
||||||
@ -68,7 +73,21 @@
|
|||||||
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)),
|
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)),
|
||||||
using: using
|
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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
@ -10,7 +10,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.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.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
var inputs = $("input");
|
var inputs = $("input");
|
||||||
|
@ -10,7 +10,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.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.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
var inputs = $("input");
|
var inputs = $("input");
|
||||||
|
@ -10,7 +10,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.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.position.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
var inputs = $("input");
|
var inputs = $("input");
|
||||||
|
@ -9,7 +9,6 @@
|
|||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.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.widget.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
$( "#elem" ).position({
|
$( "#elem" ).position({
|
||||||
|
6
ui/jquery.ui.position.js
vendored
6
ui/jquery.ui.position.js
vendored
@ -232,6 +232,12 @@ $.fn.position = function( options ) {
|
|||||||
horizontal: right < 0 ? "left" : left > 0 ? "right" : "center",
|
horizontal: right < 0 ? "left" : left > 0 ? "right" : "center",
|
||||||
vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle"
|
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 ) ) ) {
|
if ( Math.max( Math.abs( left ), Math.abs( right ) ) > Math.max( Math.abs( top ), Math.abs( bottom ) ) ) {
|
||||||
feedback.important = "horizontal";
|
feedback.important = "horizontal";
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
Reference in New Issue
Block a user