JQuery EasyUI(6)
关宏毅
第六章：Tooltip（提示框）组件
学习要点：
- 加载方式
- 属性列表
- 事件列表
- 方法列表
一、加载方式：
1.class加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<a href="###" class="easyui-tooltip" title="这是内容提示框！">Hover Me</a>
</body>
</html>
2.JS调用：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$('#box').tooltip({
content:'这是内容提示框！',
});
});
二、属性列表：
| Tooltip属性 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| position | string | 消息框位置，默认bootom，还有left、right、top |
| centent | string | 消息框内容，默认为null，可以包含html标签 |
| trackMouse | boolean | 为true时，允许提示框跟随鼠标移动，默认为false |
| deltaX | number | 水平方向提示框的位置，默认为0； |
| deltaY | number | 垂直方向提示框的位置，默认为0； |
| showEvent | string | 当激活事件的时候显示提示框。默认值为mouseenter |
| hideEvent | string | 当激活事件的时候显示提示框。默认值为mouseleave |
| showDelay | number | 延时多少秒显示提示框。默认值为200 |
| hideDelay | number | 延时多少秒隐藏提示框。默认值为100 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
});
});
三、事件列表：
| Tooltip事件 | ||
|---|---|---|
| 事件名 | 传参 | 说明 |
| onShow | e | 在显示提示框的时候触发 |
| onHide | e | 在隐藏提示框的时候触发 |
| onUpdate | content | 在提示框内容更新的时候触发 |
| onPosition | left、top | 在提示框位置改变的时候触发 |
| onDestory | none | 在提示框销毁的时候触发 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>$(function(){
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
onShow:function(e){
alert("显示的时候触发！");
}
onHide:function(e){
alert("隐藏的时候触发！");
}
onUpdate:function(content){
alert('内容改变了为：'+content);
}
onPosition:function(left,top){
console.log('left:'+left+',top:'+top);
}
onDestroy:function(e){
alert('工具栏被销毁了！');
}
});
$('#box').click(function(){
//$(this).tooltip('update','改变了！');
$(this).tooltip('destroy');
});
console.log($('#box').tooltop('options'));
});四、方法列表：
| Tooltip方法： | ||
|---|---|---|
| 方法名 | 传参 | 说明 |
| options | none | 返回属性对象 |
| tip | none | 返回tip元素对象 |
| arrow | none | 返回箭头元素对象 |
| show | e | 显示提示框 |
| hide | e | 隐藏提示框 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>$(function(){
$.fn.tooltip.defaults.position = 'top';
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
onShow:function(e){
// alert("显示的时候触发！");
// console.log($('#box').tooltip('tip'));
// console.log($('#box').tooltip('arrow'));
$('.tooltip-bottom').css('left',500);
}
onHide:function(e){
// alert("隐藏的时候触发！");
$('#box').tooltip('reposition');
}
// onUpdate:function(content){
// alert('内容改变了为：'+content);
// }
// onPosition:function(left,top){
// console.log('left:'+left+',top:'+top);
// }
// onDestroy:function(e){
// alert('工具栏被销毁了！');
// }
// });
// $('#box').click(function(){
//$(this).tooltip('update','改变了！');
// $(this).tooltip('destroy');
// });
// console.log($('#box').tooltip('options'));
// $('#box').tooltip('show');
// $('#box').tooltip('hide');
});PS：我们可以使用$.fn.tooltip.defaults重写默认值对象。
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102837787
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！
类似资料：