jquery.qtip提示信息插件用法简单实例
本文实例讲述了jquery.qtip提示信息插件用法。分享给大家供大家参考，具体如下：
公司要求写一个关于提示信息的效果，在网上查询到了这个插件，感觉很不错，下面是自己学习的内容
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<scriptsrc="lib/jquery-1.6.4.min.js"type="text/javascript"></script>
<scripttype="text/javascript"src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
<scripttype="text/javascript">
$(document).ready(
function(){
//下面使用的是插件默认的样式显示,content是指要显示的内容（包括文字和图片）
$("#huangbiao").qtip({
content:'Stemsaregreatforindicatingthecontextofthetooltip.',
style:{
tip:'bottomLeft'//Noticethecornervalueisidenticaltothepreviouslymentionedpositioningcorners
}
});
//stylejson是对提示样式的设置即外面的div样式设置，但是没有设置具体的位置
$("#huangbiao1").qtip({
content:'设置显示文字样式',
style:{
width:200,
padding:5,
background:'#A2D959',
color:'black',
textAlign:'center',
border:{
width:7,
radius:5,
color:'#A2D959'
},
tip:'bottomLeft',
name:'dark'//Inherittherestoftheattributesfromthepresetdarkstyle
}
});
//name:'green'是继承了默认的提示样式，还有其他的name可以参考帮助文档
$("#huangbiao2").qtip({
content:'使用插件自定义的样式',
style:{
name:'green'//Noticethecornervalueisidenticaltothepreviouslymentionedpositioningcorners
}
});
//target:表示提示信息显示在控件的什么位置
//tooltip:
$("#huangbiao3").qtip({
content:'Stemsaregreatforindicatingthecontextofthetooltip.',
position:{
corner:{
target:'topLeft',
tooltip:'bottomLeft'
}
}
});
$("#huangbiao4").qtip({
content:'<imgsrc="img/2.jpg">',
});
//show是指显示的情况，when是指什么事件触发让它显示出来，hide与show对应
//solo:
$("#huangbiao5").qtip({
content:'<imgsrc="img/2.jpg">',
show:{
when:'click',
solo:false
},
hide:{
when:'click',
solo:false
}
});
//显示类似于“窗口”模式的样式，含有title和内容的提示信息
$("#huangbiao6").qtip({
content:{
title:{
text:'content-title-text',
button:'button'
},
text:'content-text'
},
fixed:true
});
//api:是回调函数，beforeShow是在显示提示之前的提示信息，beforeHide则恰好相反；onRender是指内容呈现后调用
$("#huangbiao7").qtip({
content:'usecallbackfunction',
api:{
beforeShow:function(){
alert("beforeShowapifunction");
},
beforeHide:function(){
alert("beforeHideapifunction");
}
}
});
$("#huangbiao9").qtip({
content:'',
style:{
width:"1024px",
height:"1024px",
background:"black"
}
});
}
);
</script>
<title>无标题文档</title>
</head>
<divstyle="text-align:center;"><spanid="huangbiao">显示普通文字</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao1">设置显示文字样式</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao2">使用插件自定义的样式</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao3">设置提示的显示位置</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao4">显示图片</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao5">点击事件显示以及隐藏提示</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao6">含有标题的提示信息</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao7">使用回调函数</span></div>
<p>
<divstyle="text-align:center;"><spanid="huangbiao9">遮盖全屏</span></div>
<body>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。