@author YHC
绑定事件:
这个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');
}
}
});
注意://有事..出去了,待会更新.........
@author YHC 查看原文
分享到:
相关推荐
前端项目-qtip2,介绍…第2季度。第二代高级qtip插件,用于流行的jquery框架。
是qTip2的中文API PDF格式的,可以看看这篇文章http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2 精致的jQuery提示信息插件
qTip2不再维护。 如果需要支持或新功能,请考虑移至较新的库! 非常强大的工具提示 介绍... qTip 2 。 第二代高级qTip插件,用于流行的jQuery框架。 qTip 2建立在1.0的用户友好但功能丰富的基础之上,为您提供了...
这个是它所有的属性中最全的中文API,详细信息请见:http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用。
提示未功能,包括样式 位置 事件都可以 由自己定义 。。。很强很方便。。
jquery qtip
授权协议: MIT 开发语言: JavaScript 操作系统: 跨平台 jQuery工具提示 ,效果整体上说是不错的,
JQuery的前端气泡插件,包括js工具类及详细的使用实例,有注详细的注释
主要介绍了jQuery提示插件qTip2用法,结合实例形式分析了qTip2的使用技巧,可支持ajax及多种样式的设置,需要的朋友可以参考下
jQuery qtip浮动提示框插件新浪微博图片或文字ajax提示框
Jquery实现自动化表单验证,qTip作提示媒介,以留言模版做实例,验证简洁可通用化
qtip2-jquery-rails Doc Walker 宝石化 提供为 Rails 3.1+ 资产管道打包的qTip2 jQuery 插件。 安装 将这些行添加到应用程序的Gemfile : # qtip2 jquery plugin packaged for the rails asset pipeline gem '...
jquery-qtip,提示框。 使用很方便
qtip演示4种不同的文字提示
jquery.qtip-1.0.0-rc3.js 弹出层
qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。简介 若不放心可以尝试旧版的qTip,但在一些参数上会...