jQuery でスクロールを表現するプラグイン、【scrollable】にオプションを書き加えてみた

jQuery は色々なプラグインがあります。
多すぎて、もはや把握できていませんが・・・。

要素を div 内でスクロールさせたかったため、
jquery.scrollable-0.13.js
を使わせていただきました。

いやー。css もついていて、なかなか綺麗にできますね。
（※今回はデザインが余計だったため、css は全て書き直しましたが・・・orz）

スクロールを囲む要素の幅が自動で決まる

さて、このプラグイン、スクロールを囲む要素の幅を自動で決めてくれます。
たとえば、

<div id="scrollable"> 
    <div class="items"> 
        <a>1</a>  <a>2</a>  <a>3</a>  <a>4</a>  <a>5</a> 
        <a>6</a>  <a>7</a>  <a>8</a>  <a>9</a>  <a>10</a> 
        <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>         
    </div> 
</div> 
<script> 
    $("#scrollable").scrollable(); 
</script>

こんな場合、スクロールする要素の一つ目と二つ目である

<a>1</a><a>2</a>

の幅を取ってきて、その値から、

<div class="items">

の適した値を自動設定してくれるのです。

例えば、１スクロール画面内には５個の要素を出したい場合、

<script> 
    $("#scrollable").scrollable({size: 5}); 
</script>

このようにして、個数を指定すると、ちょうど要素が５個表示されるような幅になります。
なんて便利な！！

やっているのは、この部分。

if (opts.horizontal) {
    	itemRoot.width(opts.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) -2);
} else {
	itemRoot.height(opts.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) -2);	
} 

しかし、自分で幅を指定したい・・・。

でも、今回はスクロールする要素を rss から取得するため、動的に変わるのです・・・。
そのたびに、div の幅が変わるのはイヤじゃ・・・。

なので、書き換えた。

まずオプション

var opts = {
　　　　optwidth: 0,
　　　　size: 5,
　　　　vertical:false,

optwidth って名前にしてみました。

幅指定部分も書き換えたよ

	if (opts.horizontal) {
	    if (opts.optwidth != 0) {
	        itemRoot.width(opts.optwidth);
	    } else {
	    	itemRoot.width(opts.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) -2);
	    }
	} else {
		itemRoot.height(opts.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) -2);	
	} 

使うときは・・・

<script> 
    $("#scrollable").scrollable({optwidth: 500}); 
</script>

ってな感じ。

これで、毎回指定した幅の div になってくれました。
よかったよかった。