skuare.net

テーブルの表を伸縮させるjavascript「ElasticTable」

テーブルで多くの項目を作りたいけどスペースが・・・
という悩みは、このjavascriptで解消されそうです。
ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。

使用方法
ElasticTableからelastictable.jsとelastictable.cssをmootoolsからmootools.jsをダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/elastictable.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/elastictable.css"style type="text/css">
<script type="text/javascript">
window.addEvent('load', function(){
new ElasticTable({table:'id名'});
});
</script>
上記を記述したら、指定したid名をtableに付与すれば完成です。
＊1×1のthにfixedwidth fixedheightを付与うることで、デフォルトに戻るように設定できます。
<th class="fixedwidth fixedheight" style="width:横幅;height:高さ;"></th>
オプション
minWidth: '', //最小幅：デフォルト4%
minHeight: '', //最小高さ：デフォルト4%
テーブルの表を伸縮させるjavascript「ElasticTable」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：シンプルなニュースティッカーjavascript「aScroller」
次の記事：prototypeでFisheyeメニューを作成するjavascript「Fisheye」

関連記事

• [mootools]DrasticData
• [mootools]A sorting table
• 既存のテーブルを簡単にソートさせるjavascript「Table-Sort」
• [mootools]mooVRotatingMenu
• 画面遷移せずにブックマークできるウィジェット「mooSocialize」