我对 jQuery 和点击功能有疑问。我想从“http://gdakram.github.com/JQuery-Tooltip-Plugin”编辑一个语音气泡插件。在这里您可以看到,如果将鼠标悬停在按钮上,则会打开一个对话框。我想要通过点击来实现此功能,而不是通过鼠标悬停。 我的问题是,这个脚本对我来说太复杂了……这是网站的一部分(js-data):
(function($) {
$.fn.tooltip = function(settings) {
// Configuration setup
config = {
'dialog_content_selector' : 'div.tooltip_description',
'animation_distance' : 50,
'opacity' : 0.85,*/
'arrow_left_offset' : 70,
'arrow_top_offset' : 50,
'arrow_height' : 20,
'arrow_width' : 20,
'animation_duration_ms' : 300,
**'event_in':'click',**
'hover_delay' : 0,
**'event_out': 'click',**
};
事件输入和事件输出不能一起工作......有什么想法,我能做什么?
请您参考如下方法:
这很粗糙,但应该可行 - 构建您自己的“切换”之类的方法:
config = {
'dialog_content_selector' : 'div.tooltip_description',
'animation_distance' : 50,
'opacity' : 0.85,
'arrow_left_offset' : 70,
'arrow_top_offset' : 50,
'arrow_height' : 20,
'arrow_width' : 20,
'animation_duration_ms' : 300,
'_event_' : 'click'
//'event_in':'mouseover',
//'event_out':'mouseout',
//'hover_delay' : 0
};
if (settings) $.extend(config, settings);
/**
* Apply interaction to all the matching elements
**/
this.each(function() {
toggleTip(this);
});
/**
* Positions the dialog box based on the target
* element's location
**/
function toggleTip(tip) {
var count = 1;
$(tip).bind(config._event_, function(e){
e.stopPropagation();
_hide(tip);
count++ % 2 ? _show(tip) : _hide(tip);
});
};
为了使其真正有效,您需要重新考虑 _show() 和 _hide() 函数。
