エントリーのh要素抜き出して目次的な要素を作れるようなjQueryプラグイン書いた

ちょっと色々作業が煮詰まっていたので、超今更ながら気分転換にjQueryのプラグイン書き書きしたりしてました。

生jQueryぐりぐり使ってる人ってどのくらいいるんだろうなぁ。
最近はなに使えばカッコイイか教えて下さい。

どんなの

エントリーから勝手に目次作って吐き出してくれて、スクロールに合わせてなんか良い感じにやってくれるやつ（超適当）が、前どこかで見たんだけど私のググり力があまりにも貧弱すぎるので見つからず、こんなんだったかなぁと思い出しつつ作ってみた。

こんな感じになる

というか既にこのページに表示されてると思います :(

※見た目はCSSで勝手にどうぞ的な感じです

ソースコード

Githubに設置しまんた

tnker / jquery-heading
https://github.com/tnker/jquery-heading

使い方

一番シンプルな使い方は下記のような形

$('body').heading({
    content: '#targetId'
});

$('body')
抽出したhead要素の一覧DOMを出力する対象のDOMを指定
.heading({ ... })
一覧を抽出する対象のDOMなどのオプションをオブジェクトで指定

指定オプションについて

指定可能なすべてのオプションを記述した例が下記になります

contentを除くプロパティは、デフォルト値を記載してあります

$('body').heading({
    content : '#targetId',
    inner   : 'innerHTML',
    prefix  : 'heading-',
    max     : 3,
    type    : 'scroll',
    anchorFn: function(i) {
        return 's' + i;
    },
    sync    : true
});

各オプション説明

content : 必須
- h要素を抜き出す対象のセレクタ
inner
- 抜き出したh要素の内容を取得する際のメソッド名
  h要素内のテキストにタグが含まれており、そのタグを除外したい場合は innerText を使えばいい
  - innerHTML or innerText
prefix
- 抜き出したh要素で生成したタグに自動付与するクラス名のプレフィックス
max
- h要素 h1 ~ h6 までの、どこまでを表示するかのmax値
type
- 生成された目次エレメントをクリックした際の挙動
  - 'scroll' : 対象のh要素があるy座標までスクロール
    - ※ 場合によってはズレます
  - 'anchor' : 自動的に取得したh要素にidを付与しanchorで飛ばす
    - ※ ずれるの嫌な人はこっち
anchorFn : function(index, element)
- type: 'anchor' 時にh要素へのid自動付与をする際に実行される関数になり、この関数の戻り値で付与されるidが決まります。
  - デフォルトだと利用してないですが、第２引数には対象のh要素が渡ってきます
sync
- スクロールイベントをリッスンし、ページ全体のスクロール比率に最も近い位置にいる目次要素にselectedクラスを付与する処理が走ります

作ったはいいけど

果たして使うのだろうか :(