jQuery Counter Plugin

CSS 2.1 の Counter 構文 や CSS 3 の Lists モジュール のような、任意の要素に色んなタイプの連番を自動的にふる jQuery プラグイン、jQuery Counter Plugin を書いた。ol 要素ほか順列リストのマーカー部分を柔軟にコントロールしたい、というのが主な目的だけど、個人的な裏テーマは JavaScript の配列と正規表現の勉強。

Demo

Download

Usage

例えば以下のようなごく普通の ol 要素に適用する場合。

<ol>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>

プラグインを jQuery と一緒に読み込んで、setCounter() で呼び出す:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.counter.js"></script>
<script type="text/javascript">
$(function() {
  $('ol').setCounter();
});
</script>

その結果、以下のように li 要素の子要素としてマーカーが生成される。同時に display プロパティの値が list-item である場合はデフォルトのマーカーが非表示に:

<ol style="list-style-type: none;">
  <li><span class="marker"><span class="marker-body">1</span>. </span>List Item</li>
  <li><span class="marker"><span class="marker-body">2</span>. </span>List Item</li>
  <li><span class="marker"><span class="marker-body">3</span>. </span>List Item</li>
</ol>

これだけだと普通の ol と変わらないようにも見えるけど、マーカー部分を装飾できたり、display プロパティでインライン化してもマーカーが消えなかったりとか、CSS で柔軟なコントロールが可能になるのは地味に便利、と自負。

そのほか、オプションを指定すれば list-style-type: cjk-heavenly-stem とか content: "[" counter(section, upper-roman) "] "; 的なことも可能。

Options

オプションはオブジェクトで指定。

$(function() {
  $('dl').setCounter({
    selector: 'dt',
    start: 8,
    markerType: 'あ',
    markerLeft: '(',
    markerRight: ') '
  });
});
</script>
selector
番号をふる子要素。この値を jQuery の children() に渡すので、指定できるのは直接の子要素のみ。デフォルトでは空白なので、ol なら li に番号がふられる。たとえば dl 要素のうち dt 要素にだけ番号を付与したい場合なら、$('dl').setCounter({ selector: 'dt' }); となる。
start
開始する番号。デフォルトは 1。
markerType
CSS の list-style-type にあたる部分で、デフォルトではアラビア数字 (1, 2, 3…)。以下のキーワードを指定できる。
値出力例説明
0101, 02, 03 … 09, 10, 11 …アラビア数字の 0 詰め (2 桁)。
001001, 002, 003 … 099, 100, 101 …アラビア数字の 0 詰め (3 桁)。
00010001, 0002, 0003 … 0999, 1000, 1001 …アラビア数字の 0 詰め (4 桁)。
aa, b, c … x, y, zラテン文字 (小文字)。
AA, B, C … X, Y, Zラテン文字 (大文字)。
ii, ii, iii … ix, x, xi …ローマ数字 (小文字)。3999 まで。
II, II, III … IX, X, XI …ローマ数字 (大文字)。3999 まで。
AA, B, C … X, Y, Zラテン文字 (大文字)。
ああ、い、う … わ、を、ん平仮名のあいうえお。
アア、イ、ウ … ワ、ヲ、ン片仮名のアイウエオ。
いい、ろ、は … せ、す、ん平仮名のいろは。
イイ、ロ、ハ … セ、ス、ン片仮名のイロハ。
子子、丑、寅 … 酉、戌、亥十二支。全 12 文字。
甲甲、乙、丙 … 辛、壬、癸十干。全 10 文字。
一一、二、三 … 九、十、十一 …漢数字。9999 まで。
壱壱、弐、参 … 玖、壱拾、壱拾壱 …漢数字 (大字)。9999 まで。
〇一、二、三 … 九、一〇、一一 …漢数字 (位取り記数法)。9999 まで。
markerLeft
マーカーの左側に記号などを挿入できる。デフォルトではからっぽ。たとえば {markerType: '壱', markerLeft: '其の'} で「其の壱、其の弐、其の参 …」など。
markerRight
同じくマーカーの右側に挿入する記号。デフォルトは '. ' で、ol 要素のよくある感じになる。

ToDo

漢数字やローマ数字の位の計算で挫折しかけたけど、なんとか思っていたものができたのでとりあえずは満足。でもまだまだ改良の余地があるはずなので、課題をいくつかリストアップしておく。