@author YHC
text:true
概述:
text/HTML将出现在qTip初始化之后,如果设置为true(e.g.:text:true),将会使用目标元素的标题属性(e.g.:<div title='why LOVE HC?')做为提示信息显示,前提是目标元素标题可用
也可以定义一个匿名函数来返回提示内容,他的范围是目标元素;
示例:
创建一个默认的qTip,并且提示内容是"My tooltip content"
$('.selector').qtip({
content: {
text: 'My tooltip content'
}
});
我们也使用其他的jQuery元素来作为它的提示内容
$('.selector').qtip({
content: {
text: $('.selector2') // Add .clone() 如果你不想匹配的元素被移除,可以使用clone
}
});
我们也可以使用自定义函数来检索目标元素的特殊属性,作为提示信息
$('.selector').qtip({
content: {
text: function(api) {
// 检索$('.selector')元素的自定义属性,作为提示信息
return $(this).attr('qtip-content');
}
}
});
注意:自定义函数如果返回的是无效的内容,任然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为;
如果这两个属性检测到无效内容,和下面的content.attr选项将不会渲染qTip提示信息;
attr:'title'
概述:
目标元素的属性作为提示信息,如果没有提供或者有无效的内容被发现将会使用上面的content.text选项;
示例:
让我们创建一个qTip,来给所有的图片做提示,他的提示内容来自img的alt属性:
$('img[alt]').qtip({
content: {
attr: 'alt'
}
});
这个对图片类和图片站点导航非常有用的,和他们需要良好的视觉线索和上下文;
注意:如果在元素属性中发现无效内容而且content.text没有定义那么将没有qTip渲染到页面;
title.text:false
概述:
text/html 将出现在标题元素里面的内容,如果设置false,没有title被创建,一个匿名的函数也可以用来返回title元素的内容,他的范围是目标元素;
示例:
创建一个 'About me'的提示信息和一个标题来指明内容是关于什么的:
$('.selector').qtip({
content: {
text: 'I really like owls!',
title: {
text: 'About me'
}
}
});
我们也可以使用其他的jQuery的元素来作为qTip的title
$('.selector').qtip({
content: {
title: {
text: $('.selector2') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
}
});
我们也可以使用一个自定义函数来返回title内容
$('.selector').qtip({
content: {
text: 'Custom title text functions... hoorah!',
title: {
text: function(api) {
// Retrieve content from ALT attribute of the $('.selector') element
return $(this).attr('alt');
}
}
}
});
注意:自定义函数返回的是无效内容的时候仍然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为的时候;
如果提供的是无效的内容,title将不会创建;
title.button:false
概述:
text/HTML将出现在标题内部的按钮元素,(e.g.close link)位于title元素内容的右边.当你点击的按钮的时候这个按钮将关闭提示信息,
示例:
创建另一个'About me'的提示信息,开启点击,当你点击按钮的时候仅仅只是隐藏起来,
$('.selector').qtip({
content: {
text: 'I really like owls!',
title: {
text: 'About me',
button: 'Close'
}
},
hide: {
event: false
}
});
你也可以设置这个属性为true,他会默认创建一个格式化按钮;
注意:button属性仅仅只是在title属性被定义和title.text被定义而且可用的时候出现;
如果提供的是无效的内容,button将不会被创建;
ajax:Object
概述
定义qTip的ajax属性内容,请见plugin documentation这里的信息更为详细;
@author YHC
查看原文内容
以上如果有错误的地方还请大家提出,thanks!
分享到:
相关推荐
前端项目-qtip2,介绍…第2季度。第二代高级qtip插件,用于流行的jquery框架。
是qTip2的中文API PDF格式的,可以看看这篇文章http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2 精致的jQuery提示信息插件
qTip2不再维护。 如果需要支持或新功能,请考虑移至较新的库! 非常强大的工具提示 介绍... qTip 2 。 第二代高级qTip插件,用于流行的jQuery框架。 qTip 2建立在1.0的用户友好但功能丰富的基础之上,为您提供了...
这个是它所有的属性中最全的中文API,详细信息请见:http://blog.csdn.net/yhc13429826359/article/details/7796033
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