qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。
简介
若不放心可以尝试旧版的qTip,但在一些参数上会有所不同;若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http://craigsworks.com/projects/qtip2/converter/。
如果使用时出现问题,那么直接下载以下3个文件吧,至少官方演示很正常:
代码如下:
<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
除了以上插件的功能外,它的主要功能有(仅列出较常用的):
使用方法
以下就简单演示一些使用方法
创建一个最简单的提示:
代码如下:
$("#demo2").qtip({
content: "这是提示内容(by囧月)"
});
创建一个带标题的提示:
代码如下:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
, title: "提示标题"
}
});
带关闭按钮的提示:
代码如下:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
, title: {
text: "提示标题"
, button: "关闭"
}
}
});
使用元素的属性作为提示信息:
代码如下:
$("a[title]").qtip(); //从链接的title
$("img[alt]").qtip(); //从img的alt
$("div[title]").qtip(); //从div的title
也可以显式指定元素属性作为提示信息:
代码如下:
$('img[alt]').qtip({
content: {
attr: 'alt'
}
});
使用AJAX请求远程:
新闻热点
疑难解答
图片精选