4

プラグインTinyscrollabr.jshttp://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]は未定義です」を返します

私の質問がばかげている場合は申し訳ありませんが、クラスを持つ要素のリストにtinyscrollbarを適用するにはどうすればよいですか？

そして、いくつかのアクションの後、関数$ allScrollbars.tinyscrollbar_update（）;を使用してこのすべてのスクロールバーを更新する方法。

助けてくれてありがとう、私はjavascriptから始めたばかりで、学ぼうとしています。

4

2 に答える 2

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のli要素に伝えました。セマンティクスの方が優れています。ヒントをありがとう;-)

于 2012-09-05T09:23:41.187 に答える
1

クラスで要素の数を数えます：

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

次に、反復ループを使用して、各IDを呼び出します。

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

また、リスト設定の代わりにDIVを使用することをお勧めします。開始点として、共有したリンクの例を使用してください:)

于 2012-08-31T19:44:42.143 に答える