如何從一個類實現多個tinyscrollbars？

Question

我試圖實現與插件多個滾動Tinyscrollabr.js http://baijs.nl/tinyscrollbar/

爲了實現滾動條，我用一個函數scrollify喜歡這篇文章中： http://www.eccesignum.org/blog/making-tinyscrollbarjs-easier-to-implement

HTML：

<ul id="myList"> 
<li id="scrollbar1" class="col"> 
    <h2>Title 01</h2> 
    <div class="scrollBox"><!--Scrollable Content here--></div> 
</li> 

<li id="scrollbar2 class="col"> 
    <h2>Title 02</h2> 
    <div class="scrollBox"><!--Scrollable Content here--></div> 
</li> 

<li id="scrollbar3 class="col"> 
    <h2>Title 03</h2> 
    <div class="scrollBox"><!--Scrollable Content here--></div> 
</li> 
</ul> 

Javascript：

function scrollify(element,options) { // '#element', {list:of,key:values} 
var opt = options || {} 
    $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>'); 
    $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>'); 
    $(element).tinyscrollbar(options);} 

$scrollbar1 = $('#scrollbar1 .scrollBox') ; 
$scrollbar2 = $('#scrollbar2 .scrollBox'); 
$scrollbar3 = $('#scrollbar3 .scrollBox'); 
$scrollbar4 = $('#scrollbar4 .scrollBox'); 

$(function() { 
scrollify($scrollbar1);  
scrollify($scrollbar2); 
scrollify($scrollbar3); 
scrollify($scrollbar4); 

}) 

我會讓這個更簡單。 例如，我將能夠使這個：

$(function() { 
scrollify('.scrollBox'); 
}) 

但tinyscrollbar需要一個ID。通過一個類，它加載了第一個滾動條，而不是其他類。 Firebug返回這個錯誤信息「f.obj [0]不確定」

對不起，如果我的問題是愚蠢的，

然後，在一些操作之後，如何使用函數$ allScrollbars.tinyscrollbar_update（）更新所有這些滾動條。

感謝您的幫助，我剛剛開始使用JavaScript，我正在努力學習。

Answer 1

感謝KneeSkrap3r爲您的答案。這是一個很好的解決方案，但我試圖做一些事情，我不知道要滾動的元素的數量。 我想我已經找到了類似的東西（這是我試圖做的第一個jquery插件的一部分），其中$ el是類「scrollbox」的所有元素。

$el.each(function(index) 
      { 
       var $scrolls = $(this); 


       function scrollify(element,options) 
       { // '#element', {list:of,key:values} 
        var opt = options || {} 
        $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>'); 
        $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>'); 
        $(element).tinyscrollbar(options); 
       } 
       scrollify($scrolls); 

       // Update heights 
       $(window).resize(function() 
       { $scrolls.tinyscrollbar_update('relative'); 
       }); 
      }) 

像這樣，它似乎工作，但我不知道如果我使用JavaScript的良好做法。 對於Html標記，我告訴李元素div，這對語義更好。 感謝您的提示;-)

Answer 2

我會數與類元素的個數：

var scrollCount = $(".scrollbox").size(); 

然後使用迭代循環調用每個ID的：

for (i=0; i<5; i++) { 
    scrollify($('#scrollbar' + i)); 
} 

此外，我會建議的使用的DIV，而不是列表設置，使用您分享的鏈接作爲起點的示例:)