您的位置：首页 > Web前端 > JQuery

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

2017-03-28 23:20 351 查看

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，[b]设置什么事件隐藏提示框[/b]

$(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 在提示框内容更新的时候触发，[b]content接收更新后提示内容[/b]

$(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';

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航