javascript - jQuery 创建、销毁或重置

Question

嘿，我是 jQuery 插件的新手，因此不确定如何添加销毁和重置(我可以在其中添加它返回)到我当前用于工具提示的这个插件。

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));

正如您所见，其中没有销毁、删除等。

所有这一切的目的是让我禁用页面上的工具提示，直到我按下按钮来显示它们，然后如果我再次按下该按钮，它们就会出现会再次被摧毁。

我看到了一些destroy函数的示例 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相同。

如果有帮助那就太好了!

Answer 1

我明白了!

/**
* 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();
});