하나의 페이지에 여러 개의 jQuery 플러그인 인스턴스가 있습니다.

Question

jQuery UI 템플릿을 사용하여 첫 번째 jQuery 플러그인을 작성하고 있는데 동일한 플러그인의 두 인스턴스를 인스턴스화하려고했지만 다른 옵션이 있습니다.

나는 약간 도움을 함께 할 수 있었다!

자바 스크립트 :

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

참조 하시겠습니까? 더 이상 $('.' + opts.wrapperClass) 및 $('.' + opts.wrapperClass + ' .' + opts.linesClass)의 전체 DOM을 살펴 보지 않고 특정 jQuery 요소 (플러그인에 의해 처리됨) 용으로 작성된 래퍼 내에서만 스캔합니다.

는 그리고 원래 버전에서 무엇이 잘못된 것인지 정확히 : options (즉 확인하기 쉽습니다 - 단지 wrap 방법에 console.log(options) 추가) 올바르게 설정 한 경우에도 css이 라인 요소에 대한 전체 DOM에 걸쳐 적용되었다.