一個常用函數的jquery原型

我對JQuery沒有太多的經驗，除了標準的api功能，但我的頁面上有一些滾動條，它們都使用相同的代碼，只有它們每個都有一些自己的設置（例如，單獨的高度和滾動限制以及當前滾動的次數）。我希望能夠一遍又一遍地使用代碼，但每個引用都接收它自己的一組變量。我認爲原型就是我所追求的，但我無法將我的頭圍繞在我所看到的這些例子上。這是我的卷軸代碼：一個常用函數的jquery原型

$(document).ready(function() { 
     var scrollAmt = 50; //distance in pixels; 
     var scrollableAmt = $('#weblinks .container').outerHeight(); 
     var viewAmt = $('#weblinks').outerHeight(); 

     var maxScroll = Math.ceil((scrollableAmt-viewAmt)/scrollAmt); 
     var currentItem = 0; 

     function setScrollButtons(scrollRef,scrollAmount){ 

     } 

     $("#weblinks .scrollDownBtn").click(function(){ 
      if (currentItem <= maxScroll){ 


       $('#weblinks .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){ 
        currentItem++ 
       }); 

      } else { 
       currentItem = 0; 
       $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500); 
      } 
     }); 
     $("#weblinks .scrollUpBtn").click(function(){ 
      if (currentItem > 0){ 

       $('#weblinks .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){ 
        currentItem--; 
       }); 

      } else { 
       $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500); 
      } 
     }); 
    });

所以基本上什麼我想要做的就是創建一個函數或類，我想，這一切完成上面的代碼，但能一個div引用傳遞它取代#weblinks，並可能傳遞一個滾動量，並且這個功能的多個實例可以在同一個頁面上一起存在。任何人有任何關於這方面最好的方法的建議？

編輯：我已經添加了將始終存在的每個滾動的HTML。

<div id="weblinks" class="scrollbar_container"> 
     <div class="customScrollBox"> 
      <div class="container"> 
       <div class="content"> 

       </div> 
      </div> 

      <a class="scrollUpBtn" href="javascript:void(0);"></a> <a class="scrollDownBtn" href="javascript:void(0);"></a>   
     </div> 
    </div>

來源

2011-03-11 mheavers

你可以展示HTML的演示，常量是什麼？（例如，它會總是有一個'.container'，'.scrollDownBtn'＆'.scrollUpBtn'？ –

確定 - 我已經添加了 - 常量將是所有的HTML，以及用於計算scrollableAmt，viewAmt和maxScroll。 – mheavers

@mheavers：你希望在滾動條之間有什麼不同的可調值？（例如，你通常會傳遞給這個「Addon」參數，它應該是_scrollbar A_和* scrollbar B_唯一的嗎？） –

我的出價：

(function($){ 
    $.fn.extend({ 
     customScroller: function(options){ 
      return this.each(function(i,e){ 
       var container = $(e).find('.container'), 
        content = $(e).find('.content'), 
        scrollUpBtn = $(e).find('.scrollUpBtn'), 
        scrollDownBtn = $(e).find('.scrollDownBtn'); 

       var self = $(e); 
       var o = $.extend({}, $.fn.customScroller.defaults, options); 

       o.scrollableAmt = container.outerHeight(); 
       o.viewAmt = self.outerHeight(); 
       o.maxScroll = Math.ceil((o.scrollableAmt - o.viewAmt)/o.scrollAmt); 

       scrollDownBtn.click(function(){ 
        console.log('DOWN -- current: '+o.currentItem); 
        if (o.currentItem <= o.maxScroll){ 
         container.filter(':not(:animated)').animate({ 
          top: '-='+o.scrollAmt 
         },500,function(){ 
          o.currentItem++; 
         }); 
        }else{ 
         o.currentItem = 0; 
         container.filter(':not(:animated)').animate({ 
          top: o.currentItem 
         },500); 
        } 
       }); 
       scrollUpBtn.click(function(){ 
        console.log('UP -- current: '+o.currentItem); 
        if (o.currentItem > 0){ 
         container.filter(':not(:animated)').animate({ 
          top: '+='+o.scrollAmt 
         },500,function(){ 
          o.currentItem--; 
         }); 
        }else{ 
         container.filter(':not(:animated)').animate({ 
          top: o.currentItem 
         },500); 
        } 
       }); 
      }); 
     } 
    }); 

    $.fn.customScroller.defaults = { 
     scrollAmt: 50, 
     scrollableAmt: 0, 
     viewAmt: 0, 
     maxScroll: 0, 
     currentItem: 0 
    }; 
})(jQuery); 

$('#weblinks').customScroller();

要回答你的問題，我在幾個地方使用擴展：一個用於選項，另一個用於jQuery插件功能。

$.fn.extend告訴jQuery這擴展了它的功能。
$.extend({},$.fn.customScroller.defaults, option);允許您撥打.customScroller({ scrollAmount: 10 })並更改滾動的行爲。

其他問題，請直接詢問。

來源

2011-03-11 21:45:27

如果所有的div都有一個子容器類，你可以很簡單地重構它。喜歡的東西：

function scrollExample(divId) { 
    var scrollAmt = 50; //distance in pixels; 
    var scrollableAmt = $(divId + ' .container').outerHeight(); 
    var viewAmt = $(divId).outerHeight(); 

    var maxScroll = Math.ceil((scrollableAmt-viewAmt)/scrollAmt); 
    var currentItem = 0; 

    function setScrollButtons(scrollRef,scrollAmount){ 

    } 

    $(divId + " .scrollDownBtn").click(function(){ 
     if (currentItem <= maxScroll){ 


      $(divId + ' .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){ 
       currentItem++ 
      }); 

     } else { 
      currentItem = 0; 
      $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500); 
     } 
    }); 
    $(divId + " .scrollUpBtn").click(function(){ 
     if (currentItem > 0){ 

      $(divId + ' .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){ 
       currentItem--; 
      }); 

     } else { 
      $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500); 
     } 
    }); 
});

然後用類似稱呼它：

$(document).ready(function() { 
    scrollExample('#webLinks'); 
}

如果你有實際的參考對象時，它會略有不同，但仍遵循相似的原則。

來源

2011-03-11 20:01:55 CraigKerstiens

我看到的唯一問題是人們可以與多個滾動器交互，這會拋出像currentItem這樣的變量，因爲在一個滾動器上，currentItem會是3，另一方面，它可能是對嗎？ – mheavers

啊，是的，在這種情況下，你的變量可能會有衝突。最理想的是接下來的功能和命名空間。如果您在每次使用該功能時都正確命名了該功能，則不會遇到問題。另外，您還可以爲每個新實例保留一個增長的數組。 – CraigKerstiens

這是您可以爲自己創建的jQuery插件的好選擇。當然，如果你想花一些時間和學習這個原則:)

How to develop a jQuery plugin對於一些細節什麼，jQuery插件怎麼辦

來源

2011-03-11 20:06:22 rdamborsky

一個常用函數的jquery原型

回答

相關問題