如何將自定義jQuery插件應用於多個元素？

我做了一個jQuery插件，適用於單個元素時工作正常。
當我將它應用到另一個元素時，以前的停止行爲應該如此。
這樣，只有應用的最後一個元素正在工作。
當開發插件創建用於所有元素的前提時，我會考慮什麼？如何將自定義jQuery插件應用於多個元素？

這是我做插件的方式：

(function($) { 

     $.fn.scrollabix = function(params) { 

     return this.each(function(){ 
       // my code 
      });   

     }; 

})(jQuery);

這是整個代碼：

(function($) { 
     // jQuery plugin definition 
     $.fn.scrollabix = function(params) { 

      return this.each(function(){ 

       // OPTIONS/Config 
        $defaultOptions = 
             { 
              direction: 'vertical' 
             }; 
        $.extend($defaultOptions, params); 

       // LOCAL PARAMETERS 
        $self = $(this); 
        $scrolled = $("> div", this);     

       // GET INFO 
        $selfHeight = parseInt($self.css("height")); 
        $scrolledHeight = parseInt($('> div', $self).css("height")); 

        $selfWidth = parseInt($self.css("width")); 
        $scrolledWidth = parseInt($('> div', $self).css("width")); 

        $leftOutside = ($scrolledHeight) - parseInt($selfHeight) /*+ 50*/; // user for Vertivcal only 


       // PLUGIN ACTIONS 
        actions = { 
         continous : 0, 
         slideUp : function(q) 
         { 
          if($leftOutside > 0) 
          { 
           slideBy =(120 * 20)/q; 

           currTop = parseInt($scrolled.css("top")); 
           absCurrTop = Math.abs(currTop); 

           if(absCurrTop + slideBy > ($leftOutside)) 
           { 
            $scrolled.stop().animate({top : '-' + $leftOutside + 'px'}, 250); 
           } 
           else 
           { 
            if(absCurrTop < ($leftOutside)) 
            { 
             $scrolled.stop().animate({top : '-=' + slideBy}, 250, 'linear', function(){ 
              if(actions.continous == 1) 
              { 
               actions.slideUp(q); 
              } 
             }); 
            } 
           }       
          } 
         }, 
         slideDown : function(q) 
         { 
          if($leftOutside > 0) 
          { 
           slideBy =(120 * 20)/q; 

           currTop = parseInt($scrolled.css("top")); 
           absCurrTop = Math.abs(currTop); 

           if(absCurrTop - slideBy < 0) 
           { 
            slideBy = absCurrTop; 
           } 
           if(currTop < 0) 
           { 
            $scrolled.stop().animate({top : '+=' + slideBy}, 250, 'linear', function(){ 
             if(actions.continous == 1) 
             { 
              actions.slideDown(q); 
             } 
            }); 
           } 
          } 
         }, 
         slideLeft : function(q) 
         { 
          if($leftOutside > 0) 
          { 
           consolex('slideLeft'); 
          }       
         }, 
         slideRight : function(q) 
         { 
          if($leftOutside > 0) 
          { 
           consolex('slideRight'); 
          } 
         } 
        } 

       // CREATE INFRASTRUCTURE 
        $self.css({ 
         overflow : 'hidden', 
         position : 'relative' 
        }); 
        $scrolled.css({ 
         position : 'absolute', 
         top : '0px', 
         left : '0px' 
        }); 

        if($defaultOptions.direction == 'vertical') 
        { 
         $self.mousemove(function(e){ 
          var x = parseInt(e.pageX - this.offsetLeft); 
          var y = parseInt(e.pageY - this.offsetTop); 

          if(y > ($selfHeight - 120) && y < $selfHeight) 
          { 
           actions.continous = 1; 
           actions.slideUp($selfHeight - y); 
          } 
          else if(y < 120 && y >= 1) 
          { 
           actions.continous = 1; 
           actions.slideDown(y);   
          } 
          else 
          { 
           actions.continous = 0; 
          } 
         }).mouseout(function(){ 
          actions.continous = 0; 
         }); 
        } 
        else if ($defaultOptions.direction == 'horizontal') 
        { 

         $leftOutside = $scrolledWidth - $selfWidth;      

         $self.mousemove(function(e){ 
          $scrolledWidth = parseInt($scrolled.css('width')); 

          var x = parseInt(e.pageX - this.offsetLeft); 
          $selfWidth = parseInt($self.css("width")); 
          $leftOutside = ($scrolledWidth) - parseInt($selfWidth); 
          consolex($leftOutside); 

          if(x < 300 && x >= 1) 
          { 
           actions.continous = 1; 
           actions.slideRight(x);        
          } 
          else if(x > $selfWidth - 300) 
          { 
           actions.continous = 1; 
           actions.slideLeft(x);        
          } 

         }).mouseout(function(){ 
          actions.continous = 0; 
         }); 
        } 
       //return this; 
      });   
     }; 
    })(jQuery);

來源

2012-01-23 Michael

你可能在'//我code'只考慮一個單一的元素..一些假設 – PatrikAkerstrand

你能否提供更多的代碼？插件的基本結構看起來是正確的，我沒有足夠的細節來處理。 – frm

在我看來，與你的問題相關的最重要的代碼將是你已經省略的代碼，你擁有'//我的代碼'的地方。發佈後，我們可能會幫助你弄清楚。 –

你正在做使用this.each()插件裏面以及將每一個元素的邏輯的正確方法的現代化和可擴展的方法。如果你搞亂了each區塊，那麼這可能會產生問題。

來源

2012-01-23 09:39:22 ShankarSangoli

看看這些鏈接來組織你的插件

http://addyosmani.com/blog/essential-jquery-plugin-patterns/
http://alexsexton.com/?p=51
http://jqueryboilerplate.com/

他們都代表了插件創建

來源

2012-01-23 09:38:32 fcalderan

他已經以正確的方式構建了'plugin'。他的問題不是「插件」部分。 – gdoron

你可以看看描述的模式jQuery Boilerplate。該模式使用prototypical inheritance，可以確保在每個元素上實例化插件的新實例。關鍵是這些線：

// A really lightweight plugin wrapper around the constructor, 
// preventing against multiple instantiations 
$.fn[pluginName] = function (options) { 
    return this.each(function() { 
     if (!$.data(this, 'plugin_' + pluginName)) { 
      $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
     } 
    }); 
}

來源

2012-01-23 09:40:57

它看起來像我在每次循環迭代覆蓋你的全局變量。添加var來，是爲了在本地使用的每個變量，e.g $self，$scrolled等

來源

2012-01-23 11:00:34 georg

如何將自定義jQuery插件應用於多個元素？

回答

相關問題