Question

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

我可以帮忙！

使用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/

我确信这是一件我想念的简单......

Answer 1

非常好的插件，但它有一个微妙的逻辑错误。这是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元素创建的包装器中进行扫描（由插件处理）。

这正是原始版本中的错误：即使options设置正确（这很容易检查 - 只需将console.log(options)添加到wrap方法中），{{ 1}}在整个DOM中应用于这些线元素。

我的jQuery插件的多个实例在一个页面上

1 个答案: