首页 > 语言 > JavaScript > 正文

qTip2 精致的基于jQuery提示信息插件

2024-05-06 14:22:28
字体:
来源:转载
供稿:网友

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相关样式如圆角;以及以下各种插件,可根据自己需要选择:

    Ajax,这个不用说,请求远程内容的 Tips,气泡对话效果,如箭头 Modal,模态对话框效果,如jQuery UI Dialog / ThickBox 的效果 Image map,提供对map内area标记的提示支持 SVG,对SVG元素提供提示的支持 BGIFrame,用于IE6这种古董,如遮住select控件等

除了以上插件的功能外,它的主要功能有(仅列出较常用的):

    设置提示的内容、标题、关闭按钮等 使用元素的属性,来作为提示信息内容,如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等 提示信息显示的位置 提示信息的目标,即显示到什么元素上 提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click) 提示信息显示/隐藏的效果 外观的定义,通过相应样式设置 跟随可拖动目标、鼠标指针等

使用方法
以下就简单演示一些使用方法

创建一个最简单的提示:

代码如下:
$("#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请求远程:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选