我的jQuery插件的多个实例在一个页面上 [英] multiple instances of my jQuery plugin on one page

问题描述

我正在使用jQuery UI模板编写我的第一个jQuery插件，我正在尝试实例化同一个插件的两个实例 - 但是有不同的选项。

I'm writing my first jQuery plugin using the jQuery UI template and I'm trying to instantiate two instances of the same plugin - but with different options.

我可以提供一些帮助！

Javascript：

Javascript:

(function ($) {
// **********************************
// ***** Start: Private Members *****
var pluginName = 'onFancyLinks',
    version = '1.0';
// ***** Fin: Private Members *****
// ********************************

// *********************************
// ***** Start: Public Methods *****
var methods = {
    init: function (options) {
        //"this" is a jquery object on which this plugin has been invoked.
        return this.each(function (index) {
            var $this = $(this);
            var data = $this.data(pluginName);
            // If the plugin hasn't been initialized yet
            if (!data) {
                var settings = {
                    lineColor: '#fff',
                    lineWidth: 1,
                    wrapperClass: 'fancy-link',
                    linesClass: 'line',
                    transDuration: '0.7s'
                };
                if (options) {
                    $.extend(true, settings, options);
                }

                $this.data(pluginName, {
                    target: $this,
                    settings: settings
                });
            }
        });
    },
    wrap: function () {
        return this.each(function () {
            var $this = $(this),
                data = $this.data(pluginName),
                opts = data.settings,
                //wrapping div
                wrapper = '<div class="' + opts.wrapperClass + '"></div>',
                lines = {
                    top: '<div class="' + opts.linesClass + ' line-top">&nbsp;</div>',
                    right: '<div class="' + opts.linesClass + ' line-right">&nbsp;</div>',
                    bottom: '<div class="' + opts.linesClass + ' line-bottom">&nbsp;</div>',
                    left: '<div class="' + opts.linesClass + ' line-left">&nbsp;</div>'
                };

            $this.wrap(wrapper);
            $('.' + opts.wrapperClass).append(lines.top, lines.right, lines.bottom, lines.left);

            //setup transition duration of lines animation
            $('.' + opts.wrapperClass + ' .' + opts.linesClass).css({
                'transition-duration': opts.transDuration,
                backgroundColor: opts.lineColor,
                borderWidth: opts.lineWidth
            });
        });
    }
};
// ***** Fin: Public Methods *****
// *******************************

// *****************************
// ***** Start: Supervisor *****
$.fn[pluginName] = function (method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist in jQuery.' + pluginName);
    }
};
// ***** Fin: Supervisor *****
// ***************************
})(jQuery);


$(function() {

    var v1 = $('#flink2').onFancyLinks({
        lineColor: '#f00',
        lineWidth: 2,
        transDuration: '.4s'
    });

    var v2 = $('#flink').onFancyLinks({
        lineColor: '#ff0',
        lineWidth: 1,
        transDuration: '.7s'
    });


    v1.onFancyLinks('wrap');
    v2.onFancyLinks('wrap');

});

HTML：

<a id="flink2" href="http://www.google.co.uk">View Google</a>
<a id="flink" href="http://www.visarc.co.uk">View Visarc Site</a>

这是我的小提琴： http://jsfiddle.net/owennicol/xhuxk/14/

我确定这很简单我错过了...

I'm sure it's something simple that I'm missing...

推荐答案

非常好的插件，但它有一个微妙的逻辑错误。以下是 修补版本 的关键部分：

Very nice plugin, but there's a subtle logical error in it. Here's the critical part of the patched version:

var $wrapper = $this.wrap(wrapper).parent();
$wrapper.append(lines.top, lines.right, lines.bottom, lines.left);

//setup transition duration of lines animation
$wrapper.find('.' + opts.linesClass).css({
  'transition-duration': opts.transDuration,
  backgroundColor: opts.lineColor,
  borderWidth: opts.lineWidth
});

看？您不再查看整个DOM中的 $（'。'+ opts.wrapperClass）和 $（'。'+ opts.wrapperClass +' 。'+ opts.linesClass） - 分别只扫描为特定jQuery元素创建的包装器（由插件处理）。

See? You no longer look through the whole DOM for $('.' + opts.wrapperClass) and $('.' + opts.wrapperClass + ' .' + opts.linesClass) respectively - but instead scan only within the wrapper created for a specific jQuery element (processed by the plugin).

这正是原始版本中的错误：即使选项设置正确（这很容易检查 - 只需添加 console.log（选项）进入 wrap 方法）， css 在整个DOM中应用于这些线元素。

And that's exactly what was wrong in the original version: even though options were set up correctly (that's easy to check - just add console.log(options) into wrap method), the css was applied throughout the whole DOM for these line elements.

这篇关于我的jQuery插件的多个实例在一个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！