jQuery提示插件qTip2用法分析(支持ajax及多种样式)
本文实例讲述了jQuery提示插件qTip2用法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Qtip2插件提示</title>
<linkhref="jquery.qtip.css"rel="stylesheet"type="text/css"/>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="jquery.qtip.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
/*
从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(ColourStyles)、CSS3相关样式如圆角；
以及以下各种插件，可根据自己需要选择：
Ajax，这个不用说，请求远程内容的
Tips，气泡对话效果，如箭头
Modal，模态对话框效果，如jQueryUIDialog/ThickBox的效果
Imagemap，提供对map内area标记的提示支持
SVG，对SVG元素提供提示的支持
BGIFrame，用于IE6这种古董，如遮住select控件等
除了以上插件的功能外，它的主要功能有（仅列出较常用的）：
设置提示的内容、标题、关闭按钮等
使用元素的属性，来作为提示信息内容，如链接的标题(<atitle="提示信息")、图片的提示(<imgsrc="提示信息")等等
提示信息显示的位置
提示信息的目标，即显示到什么元素上
提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)
提示信息显示/隐藏的效果
外观的定义，通过相应样式设置
跟随可拖动目标、鼠标指针等
*/
$(function(){
//普通
$("#demo1").qtip({
content:"这是提示内容（ByHuSir）"
});
//带标题
$("#demo2").qtip({
content:{
text:"<b>这是提示内容</b>（ByHuSir）",
title:"提示标题"
}
});
//带关闭按钮的提示且延时3秒关闭
$("#demo3").qtip({
content:{
text:"这是提示内容（ByHuSir）",
title:"提示标题",
button:"关闭"
},
hide:{
event:false,//设置不自动关闭可配合inactive组合使用
inactive:3000//设置延时关闭
}
});
//使用AJAX请求远程
$("#demo4").qtip({
content:{
text:"加载中...",
ajax:{
url:"lwmeAtCnblogs.aspx?name=Hu"
}
}
});
//点击时出现模态对话框
$("#demo5").qtip({
content:"这是提示内容（ByHuSir）",
show:{
event:'click',//Showitonclick...
solo:true,//...andhideallothertooltips...$('#div1')
modal:true//...andmakeitmodal
},
hide:false
});
//页面加载完成时显示，且不会自动隐藏：
$("#demo6").qtip({
content:"这是提示内容（ByHuSir）",
show:{
ready:true
},
style:{
//换样式阴影圆角叠加
classes:'qtip-lightqtip-shadowqtip-rounded'
},
hide:false,
position:{
my:'bottomleft',
at:'topcenter'
}
});
//鼠标跟随
$('#demo7').qtip({
content:{
text:'Iampositionedinrelationtothemouse'
},
position:{
target:'mouse',
}
});
//使用元素的属性作为提示信息：
//$("a[title]").qtip();//从链接的title
//$("img[alt]").qtip();//从img的alt
//$("div[title]").qtip();//从div的title
//也可以显式指定元素属性作为提示信息：
//$('img[alt]').qtip({
//content:{
//attr:'alt'
//}
//});
//另外对于ajax则有以下主要参数可以设置（与jQuery.ajax一致）：
//$('.selector').qtip({
//content:{
//text:'Loading...',//Loadingtext...
//ajax:{
//url:'/path/to/file',//URLtotheJSONscript
//type:'GET',//POSTorGET
//data:{id:3},//Datatopassalongwithyourrequest
//dataType:'json',//Tellitwe'reretrievingJSON
//success:function(data,status){
////...
//}
//}
//}
//});
});
</script>
</head>
<body>
<divid="div1">
<spanid="demo1">测试一</span><br/><br/>
<spanid="demo2">测试二</span><br/><br/>
<spanid="demo3">测试三</span><br/><br/>
<spanid="demo4">测试四</span><br/><br/>
<spanid="demo5">测试五</span><br/><br/><br/><br/>
<spanid="demo6">测试六</span><br/><br/>
<spanid="demo7">测试七</span><br/><br/>
</div>
</body>
</html>
$.fn.qtip.defaults={
//页面加载完成就创建提示信息的元素
prerender:false,
//为提示信息设置id，如设置为myTooltip
//就可以通过ui-tooltip-myTooltip访问这个提示信息
id:false,
//每次显示提示都删除上一次的提示
overwrite:true,
//通过元素属性创建提示
//如a[title]，把原有的title重命名为oldtitle
suppress:true,
//内容相关的设置
content:{
//提示信息的内容
//如果只设置内容可以直接content:"提示信息"
//而不需要content:{text:{"提示信息"}}
text:true,
//提示信息使用的元素属性
attr:'title',
//ajax插件
ajax:false,
title:{
//提示信息的标题
//如果只设置标题可以直接title:"标题"
text:false,
//提示信息的关闭按钮
//如button:"x",button:"关闭"
//都可以启用关闭按钮
button:false
}
},
//位置相关的设置
position:{
//提示信息的位置
//如提示的目标元素的右下角(at属性)
//对应提示信息的左上角(my属性)
my:'topleft',
at:'bottomright',
//提示的目标元素，默认为选择器
target:FALSE,
//提示信息默认添加到的容器
container:FALSE,
//使提示信息在指定目标内可见，不会超出边界
viewport:FALSE,
adjust:{
//提示信息位置偏移
x:0,y:0,
mouse:TRUE,
resize:TRUE,
method:'flipflip'
},
//特效
effect:function(api,pos,viewport){
$(this).animate(pos,{
duration:200,
queue:FALSE
});
}
},
//显示提示的相关设置
show:{
//触发事件的目标元素
//默认为选择器
target:false,
//事件名称，默认为鼠标移到时
//可以改为click点击
event:'mouseenter',
//特效
effect:true,
//延迟显示时间
delay:90,
//隐藏其他提示
solo:false,
//在页面加载完就显示提示
ready:false,
modal:{
//启用模态对话框效果
on:false,
//特效
effect:true,
blur:true,
escape:true
}
},
//隐藏提示的相关设置
//参考show
hide:{
target:false,
event:'mouseleave',
effect:true,
delay:0,
//设置为true时，不会隐藏
fixed:false,
inactive:false,
leave:'window',
distance:false
},
//样式相关
style:{
//样式名称
classes:'',
widget:false,
width:false,
height:false,
//tip插件，箭头相关设置
tip:{
corner:true,
mimic:false,
width:8,
height:8,
border:true,
offset:0
}
},
//相关事件绑定
events:{
render:null,
move:null,
show:null,
hide:null,
toggle:null,
visible:null,
focus:null,
blur:null
}
};
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。