Theadfix (jQuery Plugin)

テーブルのthead要素を固定してくれるjQueryプラグインです。 jsを書かなくてもデータ属性を指定するだけで機能します。

使い方

thead要素をウィンドウに対してfixedで固定したい場合にはdata-theadfix="window"を、親要素に対してabsoluteで固定したい場合にはdata-theadfix="parent"をそれぞれ指定します。 デフォルトはwindowになっているので、data-theadfixと省略して指定する事も可能です。

<table data-theadfix>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<table data-theadfix="parent">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

メソッド

デフォルトではロード時にdata-theadfix属性が設定されている要素を対象に初期化していますが、 $().theadfix(options)を使用する事で個別に要素を初期化する事が可能です。

$('[data-theadfix]').theadfix(options);

オプション

初期化時にオプションで値を渡すと一部の設定を変更する事が可能です。 htmlにデータ属性を指定して初期化する場合にはdata-*を追加する事でも設定が変更できます。

イベント

theadの挙動が変わる際のイベントを取得する事も可能です。

$('#target').on('fix.theadfix', function (event) {
  console.log('fix.theadfix: ', event.target);
});
$('#target').on('release.theadfix', function (event) {
  console.log('release.theadfix: ', event.target);
});