交互にclassを付与するゼブラ機能(js-zebra)

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能(zebra)の設定が標準で実装されています。(Ver. 1.3.0より)この機能を使用してクラスが付与される要素は次のとおりです。

  • tableのtr
  • ul, olのli
  • dlのdt, dd

デモ

1つ目のdt(1行目)
1つ目のdd(2行目)
2つ目のdd(3行目)
3つ目のdd(4行目)
2つ目のdt(5行目)
1つ目のdd(6行目)

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',


zebraMark ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass 奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass 偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

使い方

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。例)zebraMarkで「.js-zebra」と指定した場合

<dl class="js-zebra">
  <dt>1つ目のdt(1行目)</dt>
  <dd>1つ目のdd(2行目)</dd>
  <dd>2つ目のdd(3行目)</dd>
  <dd>3つ目のdd(4行目)</dd>
  <dt>2つ目のdt(5行目)</dt>
  <dd>1つ目のdd(6行目)</dd>
</dl>

出力後のソースコード

<dl class="js-zebra">
  <dt class="odd">1つ目のdt(1行目)</dt>
  <dd class="even">1つ目のdd(2行目)</dd>
  <dd class="odd">2つ目のdd(3行目)</dd>
  <dd class="even">3つ目のdd(4行目)</dd>
  <dt class="odd">2つ目のdt(5行目)</dt>
  <dd class="even">1つ目のdd(6行目)</dd>
</dl>

CSS

必要に応じてスタイルを指定します。