jquery 플러그인이 여러 요소에서 작동하지 않습니다 - 덮어 쓰기 옵션

Question

첫 번째 jquery 플러그인 (라이트 박스)을 만들려고했습니다. 그것은 내가 원하는 방식으로 단일 요소에서 작동하지만 여러 요소를 사용하면 선택 사항을 덮어 씁니다.

여기 내 현재 코드입니다. 레이아웃 때문에 jsFiddle에서 작동하지 않는 것 같습니다. 여기

http://jsfiddle.net/BjwCm/

당신이 작업에 코드를 다운로드 할 수 있습니다 (실패) 샘플 :

http://frumbert.org/files/frumbox.zip

내가 바인딩 할 때 난 어떻게 든 기본 객체의 옵션을 덮어 쓸 것을 알 수 있습니다 두 번째 물건으로하지만 내가 뭘 잘못했는지 모른다. 클릭 한 번으로 움직이려고했으나 제대로 작동하지 않습니다.

Answer 1

$ this는 FullyBox가 인스턴스화되는 마지막 요소를 나타냅니다.

개인적으로 코드를 그대로 고치려고하지는 않습니다. 대신 jQuery's "Best Practices" pattern을 사용하십시오.

(function($){ 
    // ********************************** 
    // ***** Start: Private Members ***** 
    var pluginName = 'xxxxx'; 
    // ***** 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 = { 
        }; 
        if(options) { $.extend(true, settings, options); } 

        $this.data(pluginName, { 
         target : $this, 
         settings: settings 
        }); 
       } 
      }); 
     }, 
     myMethod_1 : function(){.....}, 
     myMethod_2 : function(){.....} 
    }; 
    // ***** 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); 

참고 : 필요에 따라

• 더 개인 회원과 방법을 추가 여기에 주어진 예에 따라 내 템플릿입니다.
• 공용 멤버 (메서드)는 (전용 멤버에 액세스 할 수있는) 권한이 있습니다.
• 연결 가능성을 유지하려면 특정 값을 반환하는 메서드를 제외하고 모든 메서드에서 return this.each(function(index){...}) 패턴을 사용해야합니다.
• 이 패턴 (및 다른 요소)을 사용하여 개발하는 가장 어려운 측면은 모든 문맥에서 this이 무엇을 의미하는지 알고 있습니다. 당신에 대해 지혜를 지키십시오.
• 자바 스크립트 Function.call() 및 Function.apply 방법을 사용할 준비가되어 있어야합니다. 당신이 그들을 이해했는지 확인하십시오.
• 관리자는 언뜻보기에는 이해하기가 어렵지만 을 수정할 필요가 없습니다. 그것은 멋진 코드 덩어리입니다.
• DOM 요소의 플러그인을 $(selector).pluginNmae() 또는 $(selector).pluginNmae(options)으로 인스턴스화합니다. 여기서 options은 객체 리터럴 "map"입니다. $(selector).pluginNmae('methodName', ...)
• 이 패턴의 예와 초기화 DOM 요소 (들)에
• 호출 방법은 selected answer here (바이올린에 대한 링크를 포함)에서 찾을 수있다.