qTip2 Global

来源：岁月联盟编辑：exp 时间：2012-07-30

@author YHC

Global

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

$.fn.qtip.version

概述:

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

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

概述:

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

以下便是默认值:

[javascript]
$.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
    }
};

$.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

[javascript]
// 设置nextid全局属性
$.fn.qtip.nextid = 100;

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

// 设置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",例如:长时间不活动"inactive",重新设置inactive计时器分配给它(如果有的话)通过定义inactive属性;
示例:
让我们创建一个qTip,当qTip变得不活动而且持续3秒之后就隐藏qTip,这里的不活动指的是当你停止点击的时候;
[javascript]
//设置qTip成为active仅仅只是在点击之后
$.fn.qtip.inactiveEvents = ["click"];

// 创建一个qTip如果没有点击之后的3秒隐藏
$('.selector').qtip({
    content: {
        text: 'My tooltip content'
    },
    hide: {
        inactive: 3000
    }
});

//设置qTip成为active仅仅只是在点击之后
$.fn.qtip.inactiveEvents = ["click"];

// 创建一个qTip如果没有点击之后的3秒隐藏
$('.selector').qtip({
content: {
  text: 'My tooltip content'
},
hide: {
  inactive: 3000
}
});注意:这个会影响到在该页面上的所有的qTip,包含那些已经创建的(但是只要你发生更新setting将会导致事件处理重新绑定).;
$.fn.qtip.zindex:15000
概述:
决定所有在页面上的qTip的基础z-index,如果没有z-index将会被放置到下面:
示例:
如果你使用了另外的一个插件,他恰巧使用了一个很大的z-index比qTip的默认值要大,给qTip增加一点:
[javascript]
// 现在你的qTip将出现在其他插件元素的上面
$.fn.qtip.zindex = 20000;