qTip2 Position

@author YHC

概述:

qTip使用特殊的定位系统,使用角,在这些基础的概念的背后非常简单,当你去读的时候,你会觉得实际上它变成了简单的英语.如下例子,比如说,我们想定位qTip的my为left top(左上角)

at在我们的目标元素的右下角(bottom right),非常简单,让我们来看看代码包含一下这些:

$('.selector').qtip({
	content: 'I\'m positioned using corner values!',
	position: {
		my: 'top left',  // Position my top left...
		at: 'bottom right', // at the bottom right of...
		target: $('.selector') // my target
	}
});

如何阅读以下对象,你看见这些逻辑简单的英语出现,比使用x和y坐标简单的多,上图的所有可用角落值可以用在position.my和position.at选项上,以及qTips插件的corner和

mimic选项上;

注意:这个系统主要是基于jQuery UI Position插件

target:false

概述:

HTML元素qTips将要相对于它定位,也可以设置为'mouse'和'event'(在目标位置触发qTip提示),或者是一个数组,包含一个在页面上的绝对x/y位置;

如果你也将position.adjust.mouse设置为true,qTip提示将一直跟随鼠标,直到在hide target(隐藏目标)上的hide event事件的触发,

示例:

让我们来相对定位我们的qTip在我们的文档中的第一个UL元素随后一个LI元素

$('.selector').qtip({
	content: {
		text: 'I\'m positioned in relation to a different element'
	},
	position: {
		target: $('ul:first li:last')
	}
});

我们也可以定位qTip相对于鼠标,所以这个qTip在显示的时候将给定一个鼠标的x/y坐标.

$('.selector').qtip({
	content: {
		text: 'I\'m positioned in relation to the mouse'
	},
	position: {
		target: 'mouse'
	}
});

也可以定位相同的qTip相对于多个目标元素,使用hide/show 几个元素,在非常方便的情况下,你可以使用类似的qTip在一个页面的几个元素

$('.selector').qtip({
	content: {
		text: 'I position to whatever show target triggered me.'
	},
	position: {
		target: 'event'
	},
	show: {
		target: $('.selector, .selectorTwo')
	},
	hide: {
		target: $('.selector, .selectorTwo')
	}
});

最后一个要点:绝对定位通过一个x/y的数组,例如以下qTip,左边和上面都举例页面10px

$('.selector').qtip({
	content: {
		text: 'I\'m absolutely positioned, but still work with the viewport property!'
	},
	position: {
		target: [10, 10]
	}
});

注意:设置这个为false会引起qTip相对定位的元素的.qtip()方法被调用;

       当你使用绝对定位[(x/y)]的时候,position.viewport任然起作用;

my:"top left"

概述

这个角是qTip相对于position.at的位置,请见最上面的图,里面有所角的可用值;

示例:

让我们创建一个qTip,定位于我们目标的left center;

$('.selector').qtip({
	content: {
		text: 'My center left corner is positioned next to my target'
	},
	position: {
		my: 'left center'
	}
});

注意:请见最上面的图查看所有可用值;

at:"bottom right"

概述

这个角是,position.target的元素定位提示信息的位置,请见最上面的图查看所有角可用值;

示例:

让我们创建一个qTip,定位到我们目标的左上角:

$('.selector').qtip({
	content: {
		text: 'I\'m positioned as the top left of my target'
	},
	position: {
		at: 'top left'
	}
});

注意:请见上图查看所有可用值;

container:document.body

概述

解决了qTip附加到html元素中,例如这个容器元素:

示例:

让我们附加我们的qTip到用户自定义"tooltips"容器中:

$('.selector').qtip({
	content: {
		text: 'I\'m appended within a custom tooltips DIV'
	},
	position: {
		container: $('div.tooltips')
	}
});

注意:如果容器元素内容超过容器边界(overflow)设置其他所有为可见(visible),这将显示qtip的可见,

viewport:false

概述
viewport用来保持qTip可见,例如某个元素超过边界qTip在所有时间将必须保持可见,如果将它的值设置为true将从position.container属性继承

示例:

让一个qTip试图保持在window viewport内部,根据需要调整定位角落:

$('.selector').qtip({
	content: {
		text: 'If I go off-screen, my positioning corners will adjust. Resize your browser window to see!'
	},
	position: {
		viewport: $(window)
	}
});

注意:当使用这个功能的时候你的position.corner选项将被临时调整;

effect:function side(){}

概述:

决定效果类型,他发生在一个工具提示位置的动画,一个自定义方法可以被使用,传入的一个新的position是它的一个参数,它的范围在qTip元素

示例:

让我们创建一个qTip,让他滑动到屏幕的这个位置,easing使用linear效果

$('.selector').qtip({
	content: {
		text: 'When my position is updated I slide into place. Nifty huh?'
	},
	position: {
		effect: function(api, pos, viewport) {
			// "this" refers to the tooltip
			$(this).animate(pos, {
				duration: 600,
				easing: 'linear',
				queue: false //设置这个为false,不会影响到show/hide动画效果
			});
		}
	}
});

我们也可以禁用默认的动画效果,传入false

$('.selector').qtip({
	content: {
		text: 'I don\'t slide like the rest of them...'
	},
	position: {
		effect: false
	}
});

默认的动画回调函数:

function(api, pos, viewport) { $(this).animate(pos, { duration: 200, queue: FALSE }); }

注意:默认自定义,产生动画效果,使用上面列出的自定义函数

       使用动画"queue"选项可以消除,它的问题是hiding/showing的同时还需要重新定位,这也许还有其他的副作用,如果使用你将会遇到问题

adjust.x:0

 概述:

  一个正数或者一个负数的像素值,来设置qTip的水平面偏移量,例如X轴负数将减少他的值,将qTip向左移动;

示例

让我们稍微调整我们的qTip的位置向右偏移10px

$('.selector').qtip({
	content: {
		text: 'My position is adjusted by 10px on the horizontal'
	},
	position: {
		adjust: {
			x: 10
		}
	}
});

注意:当前选项仅仅只是支持px值,所有其他单位忽略

adjust.y:0

概述:

 一个正数或者一个负数的像素值,来设置qTip的垂直面偏移,例如Y轴,负数值将减少他的值,将qTip向上移动

示例:

让我们稍微调整我们的qTip位置,向上偏移12px:

$('.selector').qtip({
	content: {
		text: 'My position is adjusted by -12px on the vertical'
	},
	position: {
		adjust: {
			y: -12
		}
	}
});

 注意:当前这个选项仅仅只是支持px单位,其他所有单位忽略

adjust.method:"flip" //这个稍后更新

adjust.mouse:true

概述:

当position.target设置为mouse,这个选项决定qTip是否跟随鼠标,当鼠标悬停在show.target目标上的时候

示例:

让我们是qTip跟随我们的鼠标:当其可见的时候

$('.selector').qtip({
	content: {
		text: 'I follow the mouse whilst I\'m visible. Weeeeee!'
	},
	position: {
		target: 'mouse',
		adjust: {
			mouse: true  // 可以省略(默认行为)
		}
	}
});

二者选其一,我们能将该参数设置为false,假设鼠标的位置出现时使qTip不跟随鼠标,类是于定位右键和上下文菜单;

$('.selector').qtip({
	content: {
		text: '我的位置在鼠标的下面,当第一次显示的时候,但是我一直停留在那里,......'
	},
	position: {
		target: 'mouse',
		adjust: {
			mouse: false
		}
	}
});

注意:仅仅只是用于当position.target设置为mouse的时候

adjust.resize:true

概述:

决绝当窗体大小改变的时候如果qTip的位置调整;

示例:

设置这个选项为true,当窗体大小改变的时候,调整qTip的位置:

$('.selector').qtip({
	content: {
		text: 'If you resize your window while I\'m visible, I\'ll adjust my position accordingly.'
	},
	position: {
		adjust: {
			target: $(document),
			resize: true // Can be ommited (e.g. default behaviour)
		}
	}
});

另一种方案,设置这个选项为false来放置他的位置变更:

$('.selector').qtip({
	content: {
		text: 'Sadly... 我不能响应窗体的resize事件 :('
	},
	position: {
		target: $(document),
		adjust: {
			resize: false
		}
	}
});

注意:该选项仅仅只是在position.target是window或者是document的时候生效,否则不起任何的作用

@author YHC        查看原文

如果以上有错误信息,请指出thanks!