[学习交流] 分享JQuery EasyUI的学习笔记-tooltip提示框组件

继续上次的分享。这个是我为毕业设计准备的，主要用来完成后台页面的制作。前台配合NodeJs，做出一个比较完整的系统。作为毕业设计。现将笔记分享给大家，希望给和我一样准备毕业设计的同学一点小小的帮助。

属性
position 'bottom'/string 消息框的位置,默认bottom，还可设置为left right top
content null/string 消息框的内容，可以包含html标签
trackMouse false/boolean 设置为true，则提示框跟随鼠标移动，否则不跟随
detalX 0/number 水平方向提示框的位置
detalY0/number 垂直方向提示框的位置
showEvent 'mouseenter'/string 设置激活哪个事件时显示提示框
hideEvent 'mouseleave'/string 设置激活哪个事件时隐藏提示框
showDelay 200/number 延时多少毫秒显示提示框
hideDelay 200/number 延时多少毫秒隐藏提示框

事件
onShow 参数：e 在显示提示框的时候触发
onHide 参数：e 在隐藏提示框的时候触发
onUpdate 参数：e 在更新提示框内容的时触发
onPosition 参数：e 在提示框位置发生改变的时候触发
onDestroy 参数：none 在提示框被销毁的时候触发

方法
options 参数：none 返回对象属性
tip 参数：none 返回tip元素的属性
arrow 参数：none 返回箭头元素的对象
show 参数：e 显示提示框
hide 参数：e 隐藏提示框
update 参数：content 更新提示框内容
reposition 参数：none 重置提示框
destroy 参数：none 销毁提示框

修改默认对象：
$.fn.tooltip.defaults.position = 'top'

示例代码：

<!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>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<style tyle="text/css">
.red{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(function (){
$('body').css('margin','100px');
/*
$('a').tooltip({
content:'这是<span class="red">提示框</span>的内容',
position:'top',
trackMouse:true,
deltaX:100,
deltaY:100,
showEvent:'click',
hideEvent:'dbclick',
showDelay:0,
hideDelay:0,
onShow:function (e){
console.log('onShow');
// var tooltip_arrow = $('.tooltip-arrow');
//console.log(tooltip_arrow);
console.log($('a').tooltip('arrow') );
},
onHide:function (e){
console.log('onHide');
},
onPosition:function (e){
console.log('onPosition');
},
onUpdate:function (e){
console.log('onUpdate');
},
onDestory:function (e){
console.log('onDestory');
}
});
$('a').mouseenter(function (){
$('.tooltip').css('left','200px');
});
$('a').mouseleave(function (){
$('a').tooltip('reposition');
});
$('#btnShow').click(function (){
$('a').tooltip('show');
});
$('#btnHide').click(function (){
$('a').tooltip('hide');
});
$('#btnDestroy').click(function (){
$('a').tooltip('destroy');
});
*/
// box开始
$('#box').tooltip({
content:'这是内容',
onShow:function (e){
$('.tooltip-bottom').css('left','500px');
},
onHide:function (e){
$('#box').tooltip('reposition');
}
});
});
</script>
</head>
<body>
<button id="btnShow">显示按钮</button>
<button id="btnHide">隐藏按钮</button>
<button id="btnDestroy">销毁按钮</button>
<a href="#">Hover me!</a>
<a href="#" id="box">Other Hover me!</a>
</body>
</html>

复制代码

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 分享JQuery EasyUI的学习笔记-tooltip提示框组件

0 个回复

浏览过的版块