学步园

@author YHC

Global

这个部分将介绍qTip的global的选项,这个将会影响到所有的创建到页面的qTip,不管是已经创建的还是将要创建的.

$.fn.qtip.version

概述:

存储着qTip2的库的版本包含在这个页面的格式是"2.x.x"

$.fn.qtip.default:{.....}

概述:

持有所有qTip的默认值,继承至你的.qtip()的调用;

以下便是默认值:

$.fn.qtip.defaults = {
	prerender: false,
	id: false,
	overwrite: true,
	suppress: true,
	content: {
		text: true,
		attr: 'title',
		title: {
			text: false,
			button: false
		}
	},
	position: {
		my: 'top left',
		at: 'bottom right',
		target: FALSE,
		container: FALSE,
		viewport: FALSE,
		adjust: {
			x: 0, y: 0,
			mouse: TRUE,
			resize: TRUE,
			method: 'flip flip'
		},
		effect: function(api, pos, viewport) {
			$(this).animate(pos, {
				duration: 200,
				queue: FALSE
			});
		}
	},
	show: {
		target: false,
		event: 'mouseenter',
		effect: true,
		delay: 90,
		solo: false,
		ready: false,
		modal: {
			on: false,
			effect: true,
			blur: true,
			escape: true
		}
	},
	hide: {
		target: false,
		event: 'mouseleave',
		effect: true,
		delay: 0,
		fixed: false,
		inactive: false,
		leave: 'window',
		distance: false
	},
	style: {
		classes: '',
		widget: false,
		width: false,
		height: false,
		tip: {
			corner: true,
			mimic: false,
			width: 8,
			height: 8,
			border: true,
			offset: 0
		}
	},
	events: {
		render: null,
		move: null,
		show: null,
		hide: null,
		toggle: null,
		visible: null,
		focus: null,
		blur: null
	}
};

注意:请看更为详细的override defaults教程,如何编辑这个对象的属性;

$.fn.qtip.nextid:0

概述:

决定基础数字标识符分配给未来的qTip,在document加载的时候这个设置了这个为0,随着连续的qTip的创建它也随之增长,这个属性是用来检索qTip

通过他们的对应的id属性以"ui-tooltip-你的qTipId"的形式;

示例:

我们让我们的qTip的从一个比较大的数字开始,例如100

// 设置nextid全局属性
$.fn.qtip.nextid = 100;
 
/* 
 * 这个qTip将拥有一个id "ui-tooltip-100" ,注意前缀是"ui-tooltip-"
 *之后所有创建的qTip都将拥有一个ID值,大于100
 */
$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	}
});

注意:这个必须是一个Integer类型的,如果你想分配一个字符串作为它的ID属性,请见单独的设置ID属性id option

$.fn.qtip.inactiveEvents:["click",
"dblclick", "mousedown", "mouseup", "mousemove", "mouseleave", "mouseenter"]

//设置qTip成为active仅仅只是在点击之后
$.fn.qtip.inactiveEvents = ["click"];
 
// 创建一个qTip如果没有点击之后的3秒隐藏
$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	},
	hide: {
		inactive: 3000
	}
});

// 现在你的qTip将出现在其他插件元素的上面
$.fn.qtip.zindex = 20000;