HOME > お役立ちツール > UsefulCntxt
【ResizeTbl】 - サイズ可変テーブル実装スクリプトライブラリ

ResizeTblは、サイズが可変なテーブルをWebページで実装する為のクロスブラウザ対応ライブラリです。
当ライブラリ自体は純粋にサイズの変更機能だけを提供するライブラリであり、外観のデザインを勝手に変更する事はありません。
実装方法も至極シンプルですので、お手軽に使用して頂くことができます。


1.サンプル
2.実装方法
3.カスタマイズ
4.更新履歴
5.ダウンロード
概要へ

サンプル

セルの右端付近をドラッグして引っ張る事で、セルの幅を変更する事ができます。
header1 header2 header3 header4
りんご バナナ オレンジ いちご
はくさい にんじん だいこん かぼちゃ

以下のテーブルは、ヘッダセルでのみ幅の変更ができます。
header1 header2 header3 header4
りんご バナナ オレンジ いちご
はくさい にんじん だいこん かぼちゃ
概要へ

実装方法

1. htmlヘッダにresizetbl.jsを追記します。
<script type="text/javascript" src="resizetbl.js"></script>

2. ResizeTblのオブジェクトを用意します。
/* オブジェクトを作成します。 */
//同時にIDを設定します。
var rtbl = new ResizeTbl({
    id:"sample"
});

3. 対象のテーブルに機能を適応させます。
対象のテーブルのtableタグに"resizable"属性を追記します。
値には機能として設定するResizeTblオブジェクトのIDを指定します。
<!-- 以下の例は、IDが"sample"であるResizeTblオブジェクトの機能をテーブルに付加します。 -->
<table resizable="sample">
    <tr>
    …
    </tr>
</table>
概要へ

カスタマイズ

オブジェクト作成時に幾つかのパラメータを指定する事で、機能のカスタマイズを行うこともできます。
/* オブジェクトを作成します。 */
var rbtn = new resizeTbl({
    id:"sample",
    header_only:true,
    pointer:"#FF0000",
    reaction:5
});

オブジェクト作成時に設定できるパラメータは以下の通りです。
id ResizeTblオブジェクトのIDを設定します。
未指定の場合は"ResizeTbl"が設定されます。
同じIDが複数作成された場合、2つ目以降からIDには"_1","_2","_3",...がj自動で付加されます。
header_only trueを指定すると、サイズ変更はヘッダセルでのみしか行うことが出来なくなります。
デフォルトではfalseが設定されています。
pointer サイズ変更を行う際に表示される、縦点線のガイドポインターの色を設定します。
デフォルトでは"#0033FF"(濃い青色)が設定されています。
reaction サイズ変更を行える位置の幅を設定します。正の整数のみ指定できます。
デフォルトでは"3"が設定されています。これは「セルの右幅より3ピクセル以内の位置でドラッグを行った場合、サイズ変更が行われる」状態です。
概要へ

更新履歴

2010/01/27  Ver1.0公開
概要へ

ダウンロード

以下のリンクからダウンロードする事ができます。
ResizeTbl.zip (Ver1.0)
ページのトップ