jquery.qtip插件简单入门实例
发布时间：2016-01-01 编辑：jiaochengji.com
本文介绍了jquery中qtip插件的用法示例，学习下jquery.qtip插件的使用方法，有需要的朋友参考下。
例子，jquery.qtip插件用法。
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
//使用插件默认的样式显示,content是指要显示的内容（包括文字和图片）
$("#huangbiao").qtip({
content: 'Stems are great for indicating the context of the tooltip.',
style: {
tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
}
});
//style json是对提示样式的设置即外面的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' // Inherit the rest of the attributes from the preset dark style
}
});
//name:'green' 是继承了默认的提示样式，还有其他的name可以参考帮助文档
$("#huangbiao2").qtip({
content: '使用插件自定义的样式',
style: {
name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
}
});
//target:表示提示信息显示在控件的什么位置
//tooltip:
$("#huangbiao3").qtip({
content: 'Stems are great for indicating the context of the tooltip.',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
$("#huangbiao4").qtip({
content: '<img src="img/2.jpg">',
});
//show 是指显示的情况，when是指什么事件触发让它显示出来，hide与show对应
//solo:
$("#huangbiao5").qtip({
content: '<img src="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: '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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
//使用插件默认的样式显示,content是指要显示的内容（包括文字和图片）
$("#huangbiao").qtip({
content: 'Stems are great for indicating the context of the tooltip.',
style: {
tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
}
});
//style json是对提示样式的设置即外面的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' // Inherit the rest of the attributes from the preset dark style
}
});
//name:'green' 是继承了默认的提示样式，还有其他的name可以参考帮助文档
$("#huangbiao2").qtip({
content: '使用插件自定义的样式',
style: {
name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
}
});
//target:表示提示信息显示在控件的什么位置
//tooltip:
$("#huangbiao3").qtip({
content: 'Stems are great for indicating the context of the tooltip.',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
$("#huangbiao4").qtip({
content: '<img src="img/2.jpg">',
});
//show 是指显示的情况，when是指什么事件触发让它显示出来，hide与show对应
//solo:
$("#huangbiao5").qtip({
content: '<img src="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: '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.qtip插件简单入门实例
qTip 基于JQuery的Tooltip插件[兼容性好]
jquery 入门教程 [翻译] 推荐
php文件上传代码大全(实例分享)
php入门实例查询数据库记录
jquery的Tooltip插件 qtip使用详细说明
php入门教程(索引)
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
jQuery多值输入插件 jQuery Manifest
jQuery的自动完成插件 Autocomplete
[关闭]