Easyui---Tooltip( 提示框)
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法， 这个组件不依赖于其他组件。
一、加载方式
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="http://cq.itsource.cn" class="easyui-tooltip" title="这是内容提示框">Hover Me</a> <a href="http://cq.itsource.cn" id="box">Hover Me</a> </body> </html>
JS加载方式
$('#box').tooltip({
content : '这里可以输入提示内容',
});
二、 属性列表
$('#box').tooltip({
position : 'top',// position string 消息框位置。 默认 bootom， 还有 left、 right、 top
content : '这里可以输入提示内容', //content string 消息框内容。默认为 null，可以包含 html 标签
trackMouse : true, //trackMouse boolean 为true时， 允许提示框跟随鼠标移动。 默认为false
deltaX : 100, //deltaX number 水平方向提示框的位置。默认为 0
deltaY : 100, //deltaY number 垂直方向提示框的位置。默认为 0
showEvent : 'click', //showEvent string 当激活事件的时候显示提示框。 默认为 mouseenter
hideEvent : 'dblclick', //hideEvent string 当激活事件的时候显示提示框。 默认为 mouseleave
showDelay : 500,//showDelay number 延时多少秒显示提示框。默认 200
hideDelay : 500, //hideDelay number 延时多少秒隐藏提示框。默认 100
});
三． 事件列表
$('#box').tooltip({
content : '这里可以输入提示内容',
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 (none) {
alert('提示框被销毁的时候触发');
},
});
四． 方法列表
//返回属性对象 console.log($('#box').tooltip('options')); //显示提示框 $('#box').tooltip('show'); //隐藏提示框 $('#box').tooltip('hide'); //更新 content 内容 $('#box').tooltip('update', '更新提示内容'); //返回 tip 元素对象 onShow : function () { console.log($('#box').tooltip('tip')); }, //返回箭头元素对象 onShow : function () { console.log($('#box').tooltip('arrow')); }, //销毁提示框 $('#box').tooltip('destroy'); //重置工具栏位置 onShow : function (e) { $('.tooltip-right').css('left', 500); }, onHide : function (e) { $('#box').tooltip('reposition'); }, PS：我们可以使用$.fn.tooltip.defaults 重写默认值对象。 $.fn.tooltip.defaults.position = 'top';
