jQuery EasyUI，Tooltip(提示框)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法，，这个组件不依赖于其 他组件。
一．加载方式
//class 加载方式
<a href="http://www.ycku.com" title="这是一个提示信息！"
class="easyui-tooltip">Hover Me
</a>
//JS 加载调用
$('#box').tooltip({
content : '这里可以输入提示内容',
});
二．属性列表
position string 消息框位置。默认 bootom，还有 left、right、top，设置提示框位置
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
position:'right' //设置提示框位置
});
});
content string 消息框内容。默认为 null，可以包含 html 标签，设置提示内容可以包含html标签
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容'
});
});
trackMouse boolean 为true时，允许提示框跟随鼠标移动。默认为false
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
position:'right', //设置提示框位置
trackMouse:true //允许提示框跟随鼠标移动
});
});
deltaX number 水平方向提示框的位置。默认为 0，设置提示框水平位置
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
position:'right', //设置提示框位置
deltaX:20, //设置提示框水平位置
deltaY:20 //设置提示框垂直位置
});
});
deltaY number 垂直方向提示框的位置。默认为 0，设置提示框垂直位置
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
position:'right', //设置提示框位置
deltaX:20, //设置提示框水平位置
deltaY:20 //设置提示框垂直位置
});
});
showEvent string 当激活事件的时候显示提示框。默认为 mouseenter，设置什么事件显示提示框
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
// position:'right', //设置提示框位置
// deltaX:20, //设置提示框水平位置
// deltaY:20 //设置提示框垂直位置
showEvent:'mouseenter', //鼠标移入显示
hideEvent:'mouseleave' //鼠标移出隐藏
});
});
hideEvent string 当激活事件的时候隐藏提示框。默认为 mouseleave，设置什么事件隐藏提示框
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
// position:'right', //设置提示框位置
// deltaX:20, //设置提示框水平位置
// deltaY:20 //设置提示框垂直位置
showEvent:'mouseenter', //鼠标移入显示
hideEvent:'mouseleave' //鼠标移出隐藏
});
});
showDelay number 延时多少秒显示提示框。默认 200，设置延迟显示时间
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
// position:'right', //设置提示框位置
// deltaX:20, //设置提示框水平位置
// deltaY:20 //设置提示框垂直位置
// showEvent:'mouseenter', //鼠标移入显示
// hideEvent:'mouseleave' //鼠标移出隐藏
showDelay:200, //设置延迟显示时间
hideDelay:200 //设置延迟隐藏时间
});
});
hideDelay number 延时多少秒隐藏提示框。默认 100，设置延迟隐藏时间
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
// position:'right', //设置提示框位置
// deltaX:20, //设置提示框水平位置
// deltaY:20 //设置提示框垂直位置
// showEvent:'mouseenter', //鼠标移入显示
// hideEvent:'mouseleave' //鼠标移出隐藏
showDelay:200, //设置延迟显示时间
hideDelay:200 //设置延迟隐藏时间
});
});
三．事件列表
onShow e 在显示提示框的时候触发
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
onShow:function () {
alert('在显示提示框的时候触发');
}
});
});
onHide e 在隐藏提示框的时候触发
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
onHide:function () {
alert('在隐藏提示框的时候触发');
}
});
});
onUpdate content 在提示框内容更新的时候触发，content接收更新后提示内容
$(function () {
$('#box').tooltip({
content : '这里可以输入提示内容',
onUpdate:function (content) {
alert('在提示框内容更新的时候触发：'+content);
}
});
});
onPosition left、top 在提示框位置改变的时候触发，接收两个参数，分别接收左位置和上位置
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容',
onPosition: function (left, top) { //在提示框位置改变的时候触发
console.log('left:' + left + ',top:' + top);
}
});
});
onDestroy none 在提示框被销毁的时候触发
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容',
onDestroy: function (none) { //在提示框被销毁的时候触发
alert('提示框被销毁的时候触发');
}
});
});
四．方法列表
options none 返回属性对象
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容'
});
$('#box').tooltip('options'); //返回一个对象，里面是tooltip的属性
});
tip none 返回 tip 元素对象
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容',
onShow: function () { //在显示时触发
alert($('#box').tooltip('tip')); //返回 tip 元素对象
}
});
});
arrow none 返回箭头元素对象
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容',
onShow: function () { //在显示时触发
alert($('#box').tooltip('arrow')); //返回箭头元素对象
}
});
});
show e 显示提示框
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容'
});
$('#box').tooltip('hide'); //默认隐藏提示框
$('#box').tooltip('show'); //默认显示提示框
});
hide e 隐藏提示框
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容'
});
$('#box').tooltip('hide'); //默认隐藏提示框
$('#box').tooltip('show'); //默认显示提示框
});
update content 更新提示框内容
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容'
});
$('#box').tooltip('update','要更新的提示内容'); //更新提示框内容
});
reposition none 重置提示框位置
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容',
onHide: function (e) { //当隐藏提示框时
$('#box').tooltip('reposition'); //重置提示框位置
}
});
});
destroy none 销毁提示框
$(function () {
$('#box').tooltip({
content: '这里可以输入提示内容'
});
$('#box').tooltip('destroy'); //销毁提示框
});
$.fn.tooltip.defaults 重写默认值对象。
$.fn.tooltip.defaults.position = 'top';