2018年04月6日网站服务器迁移完成……

jQuery工具提示插件 qTip2 可以实现类似QQ空间和微博的新功能提示

Css 苏 demo 1668℃ 0评论

qTip是一个漂亮的jQuery 的工具提示插件,这个插件功能相当强大,

演示地址:http://www.wufangbo.com/demo/jquery/16/index.html

下载地址:http://www.wufangbo.com/demo/jquery/16/16.rar

qTip项目目前已经是version2,即qTip2,官方地址是:http://craigsworks.com/projects/qtip2/,国外高手开发的。项目文档是英文的,我决定在博客上翻译一点文档,自己学习,也方便别人。

环境要求

在使用qTip之前,你需要先加载jQuery库(1.4.1以上),推荐1.4.4或者1.6.2版本的jQuery。

浏览器支持

qTip2支持的浏览器有:Chrome 8+ 、 Firefox 3+ 、 IE 6+ 、 Opera 9+ 、 Safari 2+(iOS 4+)

下载

要下载最新版本的qTip2,请访问qTip2的下载页面,选择你想您的网站上实现的功能。有几种选择,包括气泡提示和其他几个插件,并为生产环境提供minifed和packed的版本。对于生产环境,建议您使用minifed或者packed的版本。未minifed或者packed的版本,便于开发环境中的调试。

加载qTip

现在你已经有了jQuery库和qTip2文件,是时候在你的HTML文件中加载它们了。

我建议将所有的JavaScript库在</body>结束之前放置标签,因为这可以确保DOM在它之前加载好。这不是一个要求,只是一个业内人士提示!

<html>
<head>
<title>My site</title>
<!– css file –>
<link type=”text/css” rel=”stylesheet” href=”/path/to/jquery.qtip-2.0.0.css” />
</head>
<body>
<!– content here –>
<script type=”text/javascript” src=”/path/to/jquery.1.4.2.min.js”></script>
<script type=”text/javascript” src=”/path/to/jquery.qtip-2.0.0.min.js”></script>
</body>
</html>

注意要将jQuery库加载在qTip2之前,以确保插件的正确运行!

创建第一个qTip

更换浏览器的默认工具提示很简单,只需要在所有的链接元素上调用不带content参数的qTip()方法即可,它将使用链接的title属性作为默认内容。

$(‘a[title]‘).qtip();

还可以定义qTip要显示的内容的来源,例如用于图像的alt属性:

$(‘img’).qtip({
content: {
attr: ’alt’
}
})
打赏

转载请注明:苏demo的别样人生 » jQuery工具提示插件 qTip2 可以实现类似QQ空间和微博的新功能提示

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情