jQuery创建Destory & reset
jQuery创建Destory & reset
提问于 2017-02-09 19:28:01
嘿，我在jQuery插件上都是新手，因此我不知道如何在我目前使用的工具提示插件中添加一个破坏和reset (在这里我可以把它带回来)。
JS代码如下：
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* @class ssTooltips
* @author Jacek Berbecki
*/
;(function($) {
'use strict';
$.ssTooltips = {version: '1.0.0'};
$.fn.ssTooltips = function(element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if(elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95'
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function(index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function(event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($( window ).height() - event.pageY + 20)
})
},
mouseenter: function(event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function(event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
} else {
return false;
}
}
}(jQuery));正如您可能看到的，在那里没有破坏、删除等。
所有这些的目的都是为了禁用页面上的工具提示，直到我按下一个按钮向他们显示，然后如果我再次按下按钮，他们就会再次破坏。
我看到了一些破坏函数找到here的例子
destroy: function() {
this._destroy(); //or this.delete; depends on jQuery version
this.element.unbind( this.eventNamespace )
this.bindings.unbind( this.eventNamespace );
//this.hoverable.removeClass( "hover state" );
//this.focusable.removeClass( "focus state" );
}但我不知道如何在当前代码中实现它。Destory也是如此。
帮助就太好了！
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-09 20:51:44
这样啊，原来是这么回事!
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* @class ssTooltips
* @author Jacek Berbecki
*/
; (function ($) {
'use strict';
$.ssTooltips = { version: '1.0.0' };
$.fn.ssTooltips = function (element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if (elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95',
'z-index': 8
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function (index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function (event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($(window).height() - event.pageY + 20)
})
},
mouseenter: function (event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
},
mousedown: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
$.fn.ssTooltips.destroy = function () {
$('#tooltip-wrapper').remove();
}
$.fn.ssTooltips.reset = function () {
$(document).ssTooltips('.tips', {
//Controls the tooltips for examples for text/select boxes
bgColor: settings.bgColor,
txtColor: settings.txtColor,
maxWidth: settings.maxWidth,
borderRadius: settings.borderRadius,
fontSize: settings.fontSize
});
}
} else {
return false;
}
}
}(jQuery));我创建了$.fn.ssTooltips.destroy和$.fn.ssTooltips.reset，我这样称呼它们：
$('#tool_destory').on('click', function (e) {
//Destory the tool tips
$('#tooltip-wrapper').ssTooltips.destroy();
});
$('#tool_addback').on('click', function (e) {
//Add tool tips
$('#tooltip-wrapper').ssTooltips.reset();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42145246
复制相关文章
相似问题
腾讯云开发者
