easyui 提示框组件_第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

jQuery EasyUI，Tooltip(提示框)组件

学习要点：

1.加载方式

2.属性列表

3.事件列表

4.方法列表

本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法，，这个组件不依赖于其 他组件。

一．加载方式

//class 加载方式Hover Me

//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';