@author YHC
target:false
概述:
决定了那个HTML元素(s)将触发你定义的,show.event(s),当你设置为false的时候,这个元素的.qtip()方法根据使用调用;
示例:
这个示例第一个H1元素将引发显示qTip,当show.event时间被触发(在鼠标进入的时候)
$('.selector').qtip({
content: {
text: 'You moused over the first H1 element on the document.'
},
show: {
target: $('h1:first')
}
});
我们也可以使qTip在多个HTML元素上鼠标经过的时候显示:
$('.selector').qtip({
content: {
text: 'You moused over a header element'
},
show: {
target: $('h1, h2, h3, h4')
}
});
注意:设置不同的target,并不影响定位,它的控制是通过position.target选项;
event:"mouseenter"
概述:
Event(s)将在那一事件触发qTip显示,所有可用值都记录在jQueryEvent Bind文档中,多个事件以空格隔开是支持的.
示例:
下面的这个例子,当目标元素的click事件被触发之后,将触发qTip的显示;
$('.selector').qtip({
content: {
text: 'I get shown on click'
},
show: {
event: 'click'
}
});
你也可以定义多个事件,使用空格隔开字符串,下面的这个例子,将在目标元素(show.target)的click事件或者mouseover事件被触发的时候,将会触发qTip的显示:
$('.selector').qtip({
content: {
text: 'I get shown on click'
},
show: {
event: 'click mouseenter'
}
});
注意:mouseenter是不冒泡版本的mouseover,首选使用事件;
delay:140
概述:
当shou.event事件在show.target元素上触发的时候,使用毫秒数来延迟显示qTip:
示例:
在鼠标经过show.target元素1000ms( 1 second)之后显示:
$('.selector').qtip({
content: {
text: 'I have a longer delay then default qTips'
},
show: {
delay: 1000
}
});
注意:这个的工作原理非常像
Brian Cherne的hoverIntent
plugin插件
这个属性在IOS设备上将引发问题,例如iPad,iPhone,详细信息请见click me
solo:false
概述:
当show.event在show.target之上触发,解决是否这个qTip显示的时候,隐藏所有其他的qTip提示,如果一个jQuery对象使用作为它的值,qTip仅仅这是查找包含在
内的qTip对象隐藏;
示例:
让我们创建一个简单的qTip,当我显示的时候,隐藏所有其他的qTip对象:
$('.selector').qtip({
content: {
text: 'You won\' see me with any other tooltips... I\'m too cool for that!'
},
show: {
solo: true
}
});
对于某些情况之下,我们只想仅仅隐藏一个qTip的子集,我们可以给他们定义一个共同的父容器:
$('.selector').qtip({
content: {
text: 'I hide other tooltips when I\'m shown... booya!'
},
show: {
solo: $('.qtips') // Hide tooltips within the .qtips element when shown
}
});
注意:在RC3(这个我不知道是什么,如果有人知道请告诉我,thanks!)里是可以的,允许指定那个qTip应该隐藏,这个的特性稍微和2.0有一些不同,
允许仅指定给那些qTip一个共同的父容器来替代;
ready:false
概述:
决定一旦文档(document)加载之后,qTip是否显,例如:当document.ready()事件被触发的时候:
示例:
创建一个qTip,在document load之后显示,这个在那种入门教程中,使用起来非常方便:
$('.selector').qtip({
content: {
text: 'I\'m visible on page load'
},
show: {
ready: true
}
});
注意:这个选项遵守你的show.delay的设置,如果你想qTip在一加载就显示,请设置这个为0
启用这个选项在多个qTip上,会使你的页面加载时间变慢;
effect:true
概述:
决定效果类型发生在qTip显示的时候,你也可以使用一个自定义方法,当调用的时候他的scope是qTip元素,如果设置为false,将没有动画发生;
示例:
让我们创建一个qTip,当他显示的时候,显示滑下效果,使用自定义animation回调函数;
$('.selector').qtip({
content: {
text: 'I slide in when shown, none of this fading business for me!'
},
show: {
effect: function(offset) {
$(this).slideDown(100); // "this" refers to the tooltip
}
}
});
注意:默认是fadein效果(淡入)效果,整个效果持续时间为90ms(毫秒)
modal:Ojbect
概述:
定义qTip的Modal 属性,详细信息请见documentation plugin插件API;
@author YHC 原文地址
以上如果有错误信息还请指出,thanks!
分享到:
相关推荐
前端项目-qtip2,介绍…第2季度。第二代高级qtip插件,用于流行的jquery框架。
是qTip2的中文API PDF格式的,可以看看这篇文章http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2 精致的jQuery提示信息插件
这个是它所有的属性中最全的中文API,详细信息请见:http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2不再维护。 如果需要支持或新功能,请考虑移至较新的库! 非常强大的工具提示 介绍... qTip 2 。 第二代高级qTip插件,用于流行的jQuery框架。 qTip 2建立在1.0的用户友好但功能丰富的基础之上,为您提供了...
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用。
jquery qtip
提示未功能,包括样式 位置 事件都可以 由自己定义 。。。很强很方便。。
授权协议: MIT 开发语言: JavaScript 操作系统: 跨平台 jQuery工具提示 ,效果整体上说是不错的,
JQuery的前端气泡插件,包括js工具类及详细的使用实例,有注详细的注释
主要介绍了jQuery提示插件qTip2用法,结合实例形式分析了qTip2的使用技巧,可支持ajax及多种样式的设置,需要的朋友可以参考下
jQuery qtip浮动提示框插件新浪微博图片或文字ajax提示框
Jquery实现自动化表单验证,qTip作提示媒介,以留言模版做实例,验证简洁可通用化
jquery-qtip,提示框。 使用很方便
qtip演示4种不同的文字提示
qtip2-jquery-rails Doc Walker 宝石化 提供为 Rails 3.1+ 资产管道打包的qTip2 jQuery 插件。 安装 将这些行添加到应用程序的Gemfile : # qtip2 jquery plugin packaged for the rails asset pipeline gem '...
jquery.qtip-1.0.0-rc3.js 弹出层
qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。简介 若不放心可以尝试旧版的qTip,但在一些参数上会...
资源分类:Python库所属语言:Python资源全名:qtip-5.0.0.dev168-py2-none-any.whl资源来源:官方安装方法:https://lanzao.blog.csdn.net/article/details/101784059