qTip2 精致的 jQuery 提示 Web 网页信息通知插件
qTip2 是 jQuery 的一款提示插件，使用比较简单，是 qTip 的第2版，也是一个全新的版本，提供了丰富的功能及漂亮的外观，非常易于使用，qTip2 基于 1.0 的用户友好，但功能丰富的基础上，为您提供了大量的功能。
插件介绍
从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(Colour Styles)、CSS3 相关样式如圆角；
可选插件
以及以下各种插件，可根据自己需要选择：
- Ajax，这个不用说，请求远程内容的
- Tips，气泡对话效果，如箭头
- Modal，模态对话框效果，如jQuery UI Dialog / ThickBox 的效果
- Image map，提供对map内area标记的提示支持
- SVG，对SVG元素提供提示的支持
- BGIFrame，用于 IE6 这种古董，如遮住 select 控件等
特点
除了以上插件的功能外，它的主要功能有（仅列出较常用的）：
- 设置提示的内容、标题、关闭按钮等
- 使用元素的属性，来作为提示信息内容，如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
- 提示信息显示的位置
- 提示信息的目标，即显示到什么元素上
- 提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)
- 提示信息显示/隐藏的效果
- 外观的定义，通过相应样式设置
- 跟随可拖动目标、鼠标指针等
快速使用
我强烈建议将所有非必需的（即非库）JavaScript 包含放在 </body> 标记之前，因为这样可以确保 DOM 在操作之前被加载，并且脚本不会阻塞其他资源。这不是一个硬性的要求，只是一点建议！
引入文件
<html> <head> <title>My site</title> <!-- CSS file --> <link type="text/css" rel="stylesheet" href="/path/to/jquery.qtip.css" /> </head> <body> <!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) --> <script type="text/javascript" src="/path/to/jquery.min.js"></script> <!-- Include either the minifed or production version, NOT both!! --> <script type="text/javascript" src="/path/to/jquery.qtip.js"></script> <!-- Optional: imagesLoaded script to better support images inside your tooltips --> <script type="text/javascript" src="/path/to/jquery.imagesloaded.pkg.min.js"></script> </body> </html>
调用插件
$('a').qtip({ // Grab some elements to apply the tooltip to
content: {
text: 'My common piece of text here'
}
})相关链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论