码迷,mamicode.com
首页 > 其他好文 > 详细

Tooltip(提示框)组件

时间:2015-11-30 02:12:14      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

一.加载方式 

//class加载方式

<a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me </a>

//JS 加载调用

$(‘#box‘).tooltip({

content : ‘这里可以输入提示内容‘,

});

二.属性列表

技术分享

//属性设置

$(‘#box‘).tooltip({

position : ‘top‘,

content : ‘这里可以输入提示内容‘,

trackMouse : true,

deltaX : 100,

deltaY : 100,

showEvent : ‘click‘,

hideEvent : ‘dblclick‘,

showDelay : 500,

hideDelay : 500,

});

 

三.事件列表

技术分享

$(‘#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‘;

Tooltip(提示框)组件

标签:

原文地址:http://www.cnblogs.com/mylovemygirl/p/5006059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!