如何将自定义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插件应用于多个元素？

回答

相关问题