今回はリストや表組みで交互に色を変えるなど、スタイルを適用するときに便利なjQueryプラグインをご紹介します。
jquery.alternation.js [ダウンロード]
HTMLで以下のようなリストがあったとき、リストを見やすくするため交互に背景色をつける場合は、背景色をつける要素になんらかのスタイルクラスを与え、そのスタイルクラスに対して背景色を指定する方法があります。
|
1 2 3 4 5 6 |
<ul> <li>リンゴ</li> <li>バナナ</li> <li>ミカン</li> <li>イチゴ</li> </ul> |
背景色をつける要素にalterクラスを指定
|
1 2 3 4 5 6 |
<ul> <li>リンゴ</li> <li class="alter">バナナ</li> <li>ミカン</li> <li class="alter">イチゴ</li> </ul> |
CSSは下記のように指定します。
|
1 2 3 4 5 6 7 |
ul li { /* 通常のリストの指定 */ } ul li.alter { /* 背景色を薄い灰色にする */ background-color: #e6e6e6; } |
しかし、この方法を手動で行うと項目の数が増えた場合、HTMLのマークアップが煩雑になります。また、項目の追加や削除があった場合の作業も、考えただけでイヤになります。
そこで、本jQueryプラグインの出番です。
使い方は、jQuery本体を読み込んだ後に、本プラグインを読み込ませて、document.readyイベントあたりでプラグインを実行するだけです。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" src="js/jquery-1.3.2.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.alternation.js" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $.alternation(); }); //]]> </script> |
これで、alternationクラスが指定されている要素の子要素に対して交互にalterクラスが適用されます。
下記のリストであれば、
適用前：
|
1 2 3 4 5 6 |
<ul class="alternation"> <li>リンゴ</li> <li>バナナ</li> <li>ミカン</li> <li>イチゴ</li> </ul> |
適用後：
|
1 2 3 4 5 6 |
<ul class="alternation"> <li>リンゴ</li> <li class="alter">バナナ</li> <li>ミカン</li> <li class="alter">イチゴ</li> </ul> |
のように、マークアップされます。
オプション
以下のようにオプションが指定可能です。
|
1 2 3 4 5 6 |
$.alternation( { selector: '.alternation', // 適用する親要素を指定するセレクタ classname: 'alter', // 該当する子要素に付与するスタイルクラス名 each: 2, // 何要素毎に適用するか （4であれば4つ目の要素毎に適用 callback: function(element){} // 該当したときに実行されるコールバック関数、引数はHTMLエレメント } ); |
また、特定のセレクタのみに適用したい場合は以下の書式も可能です。
|
1 |
$('#someid').alteration(); // id="someid"の子要素に適用 |
追記
上記プラグインは、jQuery標準の :nth-child セレクタで代替え可能です。
|
1 2 3 4 5 6 7 8 |
// 2, 4, 6 .. 偶数番目の要素に.alterクラスを適用 $('.alternation:nth-child(even)').addClass('alter'); // 1, 3, 5 .. 奇数番目の各要素に処理を適用 $('.alternation:nth-child(odd)').each(function(){ /* 個々の要素への何らかの処理 */ }); // 3番目毎の各要素に処理を適用 $('.alternation:nth-child(3n)').each(function(){ /* 個々の要素への何らかの処理 */ }); |
本プラグインの使い方等、ご質問があればコメントを入れていただくか、 twitterにて@nojimage宛につぶやいていただければ、たぶんご返答いたします。
Pingback: マークアップ補助用 jquery プラグイン2種 @ php-tips