qTip2 Events详细说明
绑定事件:
这个API触发一些特殊的事件(以下详细信息),允许你给qTip分配多个时间监听,和为某一事件做出响应,例如:
我们绑定一个事件句柄,它将侦听qTip的移动的事件,和更新DIV元素里面显示的qTip的坐标内容;
$('.selector').qtip({
content: 'When I move I update coordinates on the page!',
events: {
move: function(event, api) {
$('#coords').text( event.pageX + '/' + event.pageY );
}
}
});
非常好!非常简单,而且易于集成,然而,如果我们需要的不仅仅只是更新坐标,对于整合其他插件来说的话,其中的一个问题就是,一个可能就是在不同的文件难以调用
我们内部已经存在的回调函数!
$('.selector').qtip({
content: 'When I move I update coordinates on the page!',
events: {
/*
*所以你的qTip的prerender将有可能设置为false,我们将绑定在render事件上
*所以我们需要确定qTip在实际渲染之前绑定我们的事件处理函数.
*/
render: function(event, api) {
// 从API元素对象提取qTip元素
var tooltip = api.elements.tooltip;
//注意'tooltip'是事件名的前缀
tooltip.bind('tooltipmove', function(event, api) {
anotherPlugin.update(event); // 更新我们其他插件并传入我们的事件对象
})
},
// 老的move事件选项任然应用
move: function(event, api) {
$('#coords').text( event.pageX + '/' + event.pageY );
}
}
});
oh!非常棒!绑定多个事件是如此的简单,所有的可用事件列表如下,仅仅需要注意的是你的事件的前缀的名称是tooltip,当你手动绑定事件的时候;
event.preventDefault();
在这种情况下,使用Javascript标准函数,你可使用event.preventDefault(),来防止默认的事件发生,例如,在show事件中停止qTip显示:
$('.selector').qtip({
content: '我将不会显示,因为我的一个show事件返回了false!',
show: 'mousedown',
events: {
show: function(event, api) {
event.preventDefault(); // Stop it!
}
}
});
如果你需要在一些逻辑条件下决定显示还是不显示,使用这个非常方便,另外需要注意的是,任何的事件处理,都可以停止默认的动作,不仅仅是第一个绑定;
event.originalEvent
下面所有的事件都传入一个event对象最为第一个参数,在这个event对象中有另外一个对象叫originalEvent,这个包含这个事件触发的回调,可以使用它来检测特殊事件,
例如:右键点击事件
$('.selector').qtip({
content: 'Right-click to open me!',
show: 'mousedown',
events: {
show: function(event, api) {
// Only show the tooltip if it was a right-click
if(event.originalEvent.button !== 2) {
event.preventDefault();
}
}
}
});
render:function(){}
概述:
qTip渲染时候触发;
例子:
更新其他元素,例如一个购物车的总数,当qTip渲染的时候;
$('.selector').qtip({
content: {
text: 'My tooltip content'
},
events: {
render: function(event, api) {
$('.cartTotal').triggerHandler('update');
}
}
});
注意:渲染的过程中不能使用preventDefault()打断,上面所描述的;
在一个qTip的生命周期,该事件仅仅只是触发一次;
show:function(){}
概述:
在qTip通过js类库本身显示的时候触发,或者通过用户调用toggle或者是show API方法时候触发;
示例:
让我们在每当这个qTip显示的时候就隐藏另一个元素:
$('.selector').qtip({
content: {
text: 'I hide another element when shown...'
},
events: {
show: function(event, api) {
$('.hideMe').hide();
}
}
});
注意:使用上面描述的preventDefault(),将阻止qTip显示.
hide:function(){}
概述:
当qTip通过js函数库本身隐藏的时候触发,或者通过用户显示调用toggle或者hide API方法的时候触发;
示例:
让我们每当这个qTip元素隐藏的时候,显示一个其他的元素:
$('.selector').qtip({
content: {
text: 'I cause another element to show when I\'m hidden...'
},
events: {
hide: function(event, api) {
$('.showMe').show();
}
}
});
注意:使用上面描述的preventDefault(),将阻止qTip隐藏;
toggle:function(){}
概述:
当qTip状态切换的时候触发,例如:show/hide,或者通过用户显示调用toggle 或者 hide API方法的时候触发,这是用来绑定上面的tooltipshow和tooltiphide
这个两个事件的最为快捷的方法.
示例:
我们使用这个show或者hide,快速的实现添加或者移除一个特定的属性,想类一样,没有重复的代码:
- $('.selector').qtip({
- content: {
- text: 'I toggle a class on my target element when shown or hidden!'
- },
- events: {
- toggle: function(event, api) {
- api.elements.target.toggleClass(event.type === 'tooltipshow');
- }
- }
- });
注意:这里没有tooltiptoggle这个事件,它只是一个绑定这个两个tooltipshow和tooltiphide的快速实现;
使用上面描述的preventDefault(),将阻止tootip的show或者hide,根据事件的类型触发;
visiable:function(){}
概述:
当qTip开始显示的时候触发,例如:在show.effect完成后和qTip可见而且有显示尺寸之后触发,插件和代码需要qTip布局的时候,这个是非常有用的,当他可见而且有尺寸的时候,
如果这个是一个function他将正确执行;
因为这个事件触发之后qTip已经显示了,如果event.preventDefault();调用了,在这个事件将什么也不做,因为qTip已经显示了,当这个时候触发之后;
示例:
让我们创建一个qTip让其显示的时候,隐藏另一个元素:
$('.selector').qtip({
content: {
text: 'I hide another element when shown...'
},
events: {
visible: function(event, api) {
$('.selector').hide();
}
}
});
注意:这个与show event是有很大的区别滴!,它是在show动作之前完成的,亲!记住,不是之后完成的;
由于上述event.preventDefault()被调用在这个事件里什么也不做,因为qTip已经显示了,当这个时候触发的时候;
hidden:function(){}
概述:
当qTip开始隐藏的时候触发,例如:在hidden.effect已经完成,qTip已经隐藏(亲,这个你懂的->display:none),当插件和代码需要qTip完全隐藏之后做某事..这个是非常有用的,
如果它是一个函数将正确执行
因为这个事件触发之后qTip已经隐藏,event.preventDefault()被调用,在这个事件将什么也不做,因为这个事件触发后qTip已经隐藏了;
示例:
当qTip隐藏的时候,显示另一个元素:
$('.selector').qtip({
content: {
text: 'I show another element when hidden...'
},
events: {
hidden: function(event, api) {
$('.selector').show();
}
}
});
注意:这个是与hide event有很大的不同滴....,因为是在hide动作之前完成的,不是之后;
综上所述event.preventDefault()被调用这个事件将什么也不做,因为qTip已经隐藏了,当这个事件触发的时候;
move:function(){}
概述:
当qTip重新定位的时候触发,也可以通过函数库本身触发,或者当用户调用reposition API方法的时候触发;
示例:
让我们更新另一个qTip的position
$('.selector').qtip({
content: {
text: 'When I move, I update all qTips who are positioned in relation to me!'
},
events: {
move: function(event, api) {
// For more information on the API object, check-out the API documentation
api.elements.content.find('.hasTooltip').qtip('update');
}
}
});
注意:使用上面描述的event.preventDefault()将阻止tooltip位置更新;
focus:function(){}
概述:
当qTip获得焦点时候触发,例如:最近显示的或者mouseover,也可以通过库本身或者focus API方法;
示例:
让我们创建一个qTip,谁获得焦点,谁的颜色就改变;
$('.selector').qtip({
content: {
text: 'When I gain focus over the other qTips, my colour changes!'
},
events: {
focus: function(event, api) {
// For more information on the API object, check-out the API documentation
api.elements.tooltip.toggleClass('ui-tooltip-blue ui-tooltip-cream');
}
}
});
注意:使用上面描述的preventDefault(),将阻止他获得焦点;
blur:function(){}
概述:
当qTip离开焦点的时候触发,例如另一个qTip获得焦点(请见上面),类似的示例在上面:
$('.selector').qtip({
content: {
text: 'When I lose focus to another qTip, my colour changes!'
},
events: {
blur: function(event, api) {
// For more information on the API object, check-out the API documentation
api.elements.tooltip.toggleClass('ui-tooltip-blue ui-tooltip-cream');
}
}
});
注意:在离开焦点的过程中,尽量的避免使用上面描述的preventDefault();
qTip2 Events详细说明的更多相关文章
- oracle 有用站点
使用oradebug修改数据库scn – 提供专业ORACLE技术咨询和支持@Phone13429648788 - 惜分飞 Solaris上使用DTrace进行动态跟踪 老熊的三分地-Oracle及数 ...
- HighCharts学习笔记
目录 xAxis自定义时间刻度的显示 xAxis自定义时间刻度 我们先来看下HighCharts图表的xAxis对象有哪些属性(红色标记重要属性): allowDecimals: Booleancat ...
- oracle 常用博客网址
使用oradebug修改数据库scn – 提供专业ORACLE技术咨询和支持@Phone13429648788 - 惜分飞 Solaris上使用DTrace进行动态跟踪 老熊的三分地-Oracle及数 ...
- SSA与ASS字幕
SSA字幕与ASS字幕 SSA全称SubStationAlpha,是由CSLow(又称Kotus)创建的一种字幕格式,用以实现比传统字幕诸如srt等格式更为复杂的功能.SSA目前的版本为v4.00.S ...
- Delphi控件之---通过编码学习TStringGrid(也会涉及到Panel控件,还有对Object Inspector的控件Events的介绍
我是参考了万一的博客里面的关于TStringGrid学习的教程,但是我也结合自己的实际操作和理解,加入了一些个人的补充,至少对我有用! 学用TStringGrid之——ColCount.RowCoun ...
- android的logcat详细用法
Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过 logcat 命 令来查看和使用. 使用logcat命令 你可以用 logc ...
- Google C++单元测试框架GoogleTest---Extending Google Test by Handling Test Events
Google TestExtending Google Test by Handling Test Events Google测试提供了一个事件侦听器API,让您接收有关测试程序进度和测试失败的通知. ...
- angularjs学习总结 详细教程(转载)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- HighCharts学习笔记(二)HighCharts结构及详细配置
HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...
随机推荐
- C语言中两个!!的作用
两个!是为了把非0值转换成1,而0值还是0. 因为C语言中,所有非0值都表示真. 所以!非0值 = 0,而!0 = 1.所以!!非0值 = 1,而!!0 = 0.例如:i=123 !i=0 !!i=1 ...
- mysql5.6以上(适用5.7)免安装版本 终极配置
1.解压你的mysql5.6 我解压的位置是D:\Program Files\mysql--winx64,你可以随意放在任何位置,不建议解压到C盘 2.来到你解压的文件根目录下,新建一个my.ini文 ...
- vijos 1907 DP+滚动数组
描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣告 ...
- 快速搭建rabbitmq单节点并配置使用
安装erlang环境 wget http://erlang.org/download/otp_src_20.3.tar.gz tar xf otp_src_20.3.tar.gz && ...
- Linux 文件编码问题及iconv命令
iconv命令是运行于linux/unix平台的文件编码装换工具.当我们在linux/unix系统shell查看文本文件时,常常会发现文件的中文是乱码的,这是由于文本文件的编码与当前操作系统设置的编码 ...
- bzoj 4034: [HAOI2015]树上操作——树链剖分
Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...
- 【BZOJ】3790 神奇项链
[算法](manacher+贪心)||(manacher+DP+树状数组/线段树) [题解] manacher求回文串,后得到线段,做一点计算映射回原串线段. 然后问题转化为可重叠区间线段覆盖问题,可 ...
- solaris 服务器配置网络
1. 修改配置文件 vi /etc/hostname.e1000g1 --e1000g1是硬件(网卡)的名称,不同的服务器名称不同 添加/修改:192.168.50.238 ...
- perl 列出一个目录下的文件的大小
use strict; use warnings; use Cwd; my $dir = 'd:\\www'; chdir($dir); opendir DIR, $dir or die " ...
- 如何得知 kernel 或 android 已開機多久時間
adb shell cat /proc/uptime 中的第一個數字, adb shell cat "/proc/uptime" 210.79 312.76 或者是 kernel ...