jquery.qtip提示信息插件用法简单实例

2020-05-29 07:00:16易采站长站整理

//显示类似于“窗口”模式的样式,含有title和内容的提示信息
$("#huangbiao6").qtip({
content: {
title: {
text: 'content-title-text',
button: 'button'
},
text: 'content-text'
},
fixed:true
});
//api:是回调函数,beforeShow是在显示提示之前的提示信息,beforeHide则恰好相反;onRender是指内容呈现后调用
$("#huangbiao7").qtip({
content: 'use callback function',
api:{
beforeShow:function(){
alert("beforeShow api function");
},
beforeHide:function(){
alert("beforeHide api function");
}
}
});
$("#huangbiao9").qtip({
content: '',
style:{
width:"1024px",
height:"1024px",
background:"black"
}
});
}
);
</script>
<title>无标题文档</title>
</head>
<div style="text-align:center;"><span id="huangbiao">显示普通文字</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao1">设置显示文字样式</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao2">使用插件自定义的样式</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao3">设置提示的显示位置</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao4">显示图片</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao5">点击事件显示以及隐藏提示</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao6">含有标题的提示信息</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao7">使用回调函数</span></div>
<p>
<div style="text-align:center;"><span id="huangbiao9">遮盖全屏</span></div>
<body>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。