[JQUERY] Twitter Bootstrap 플러그인을 확장하는 방법

Twitter Bootstrap 플러그인을 확장하는 방법

해결법

1. ---

   1.이것은 오래된 스레드이지만 다음 패턴을 사용하여 MODAL에 대한 사용자 정의 확장을 만들었습니다.

   이것은 오래된 스레드이지만 다음 패턴을 사용하여 MODAL에 대한 사용자 정의 확장을 만들었습니다.

   // save the original function object
   var _super = $.fn.modal;
   
   // add custom defaults
   $.extend( _super.defaults, {
       foo: 'bar',
       john: 'doe'
   });
   
   // create a new constructor
   var Modal = function(element, options) {
   
       // do custom constructor stuff here
   
        // call the original constructor
       _super.Constructor.apply( this, arguments );
   
   }
   
   // extend prototypes and add a super function
   Modal.prototype = $.extend({}, _super.Constructor.prototype, {
       constructor: Modal,
       _super: function() {
           var args = $.makeArray(arguments);
           _super.Constructor.prototype[args.shift()].apply(this, args);
       },
       show: function() {
   
           // do custom method stuff
   
           // call the original method
           this._super('show');
       }
   });
   
   // override the old initialization with the new constructor
   $.fn.modal = $.extend(function(option) {
   
       var args = $.makeArray(arguments),
           option = args.shift();
   
       return this.each(function() {
   
           var $this = $(this);
           var data = $this.data('modal'),
               options = $.extend({}, _super.defaults, $this.data(), typeof option == 'object' && option);
   
           if ( !data ) {
               $this.data('modal', (data = new Modal(this, options)));
           }
           if (typeof option == 'string') {
               data[option].apply( data, args );
           }
           else if ( options.show ) {
               data.show.apply( data, args );
           }
       });
   
   }, $.fn.modal);
   

   이렇게하면 할 수 있습니다

   1) 기본 옵션을 추가하십시오

   2) 사용자 정의 인수로 새로운 방법을 만들고 원본 (슈퍼) 함수에 대한 액세스

   3) 원래의 생성자가 호출 된 후에 생성자에서 물건을 수행하십시오.

2. ---

   2.레코드의 경우 기존 기능을 무시하거나 확장하는 간단한 방법이 있습니다.

   레코드의 경우 기존 기능을 무시하거나 확장하는 간단한 방법이 있습니다.

   var _show = $.fn.modal.Constructor.prototype.show;
   
   $.fn.modal.Constructor.prototype.show = function() {
       _show.apply(this, arguments);
       //Do custom stuff here
   };
   

   사용자 정의 인수를 다루지는 않지만 위의 방법은 쉽습니다. 적용 및 인수를 사용하는 대신 함수 정의에서 원래 인수와 사용자 정의 인수를 지정한 다음 원래 인수로 원래의 _show (또는 그 중)를 호출하고 마지막으로 새 인수로 다른 물건을 수행하십시오.

3. ---

   3.참고로, 나는 Plugin 스크립트 자체에 필요한 기능을 포크하고 추가하여 TypeAhead 플러그인을 "확장"하여 유사한 문제가있었습니다.

   참고로, 나는 Plugin 스크립트 자체에 필요한 기능을 포크하고 추가하여 TypeAhead 플러그인을 "확장"하여 유사한 문제가있었습니다.

   원본을 변경 해야하는 경우 실제로 확장자가 아니므로 모든 수정을 한 곳에서 두는 것이 더 쉽습니다.

4. ---

   4.BootStrap 3 에서이 작업을 수행하려는 누구에게나 플러그인 레이아웃이 비트를 변경했습니다. 모든 부트 스트랩 3 플러그인에 대한 기본 옵션이 플러그인 생성자에 연결됩니다.

   BootStrap 3 에서이 작업을 수행하려는 누구에게나 플러그인 레이아웃이 비트를 변경했습니다. 모든 부트 스트랩 3 플러그인에 대한 기본 옵션이 플러그인 생성자에 연결됩니다.

   var _super = $.fn.modal;
   $.extend(_super.Constructor.DEFAULTS, {
          foo: 'bar',
          john: 'doe'
   });
   

5. ---

   5.David에서 위의 수락 된 답변을위한 +1. 그러나 내가 더 많은 것을 단순화 할 수 있다면, 나는 확장 된 기본값을 조정하고 $ fn.modal은 다음과 같이 확장 될 것입니다.

   David에서 위의 수락 된 답변을위한 +1. 그러나 내가 더 많은 것을 단순화 할 수 있다면, 나는 확장 된 기본값을 조정하고 $ fn.modal은 다음과 같이 확장 될 것입니다.

   !function($) {
   
       'use strict';
   
       // save the original function object
       var _super = $.fn.modal;
   
       // create a new constructor
       var Modal = function(element, options) {
   
           // do custom constructor stuff here
   
           // call the original constructor
           _super.Constructor.apply( this, arguments );
   
       }
   
       // add custom defaults
       Modal.DEFAULTS = $.extend( _super.defaults, {
            myCustomOption: true
       });
   
       // extend prototypes and add a super function
       Modal.prototype = $.extend({}, _super.Constructor.prototype, {
           constructor: Modal,
           _super: function() {
               var args = $.makeArray(arguments);
               _super.Constructor.prototype[args.shift()].apply(this, args);
           },
           show: function() {
   
               // do custom method stuff
   
               // call the original method
               this._super('show');
           },
           myCustomMethod: function() {
               alert('new feature!');
           }
       });
   
       // Copied exactly from Bootstrap 3 (as of Modal.VERSION  = '3.3.5')
       // Notice: You can copy & paste it exactly, no differences!
       function Plugin(option, _relatedTarget) {
           return this.each(function () {
               var $this   = $(this)
               var data    = $this.data('bs.modal')
               var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
   
               if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
               if (typeof option == 'string') data[option](_relatedTarget)
               else if (options.show) data.show(_relatedTarget)
           })
       }
   
       // override the old initialization with the new constructor
       $.fn.modal = $.extend(Plugin, $.fn.modal);
   
   }(jQuery);
   

from https://stackoverflow.com/questions/9137311/how-to-extend-twitter-bootstrap-plugin by cc-by-sa and MIT license