Kawa.netxp JKL.Resizable - サイズ可変エレメント

エレメントの右端・下端・右下隅をマウスでドラッグして、 縦・横のピクセル数を変更できるようにします。

Internet Explorer 6.0、 Firefox 1.0、 Opera 8.0 で動作確認をしています。

ブラウザ依存の制限として、 Opera 8.0 ではエレメントの横幅を縮小（←）することはできません。
エレメントの横幅拡大（→）や、高さ拡大（↑）縮小（↓）はできます。
Opera 8.0 以外では、横幅の縮小も問題ありません。

エレメントの上端・左端を利用したサイズ変更はできません。
右端・下端のみドラッグ→サイズ変更できます。

ダウンロード

JKL.Resizable は、下記アーカイブ中の jkl-resizable.js 単独で動作します。

　jkl-resizable-0.04.tar.gz TAR-GZ

　jkl-resizable-0.04.lzh LZH

.tar.gz 版と .lzh 版の内容は同じです。（アーカイブ形式のみ違う）

サンプル

右や下の枠を動かすことで、
このエリアの大きさを変更できます。

このサンプルのソースは以下のとおりです。 

<head>
<script type="text/javascript" src="jkl-resizable.js"></script>
<script type="text/javascript"><!--
    function res1_init () {
        var res1 = new JKL.Resizable( "res1_body" );
        res1.resizeTo( 320, 160 );
        res1.setEast( "res1_east" );
        res1.setSouth( "res1_south" );
        res1.setSouthEast( "res1_southeast" );
    };
//--></script>
</head>
<body onload="res1_init();">
        （中略）
<table border="0" cellpadding="0" cellspacing="0" style="border: 1px #9999FF solid;">
<tr>
    <td id="res1_body">
        右や下の枠を動かすことで、<br>
        この本文エリアの大きさを変更できます。
    </td>
    <td id="res1_east" style="width: 6px; background: #9999FF;"></td>
</tr>
<tr>
    <td id="res1_south" style="height: 6px; background: #9999FF;"></td>
    <td id="res1_southeast" style="width: 6px; height: 6px; background: #6666CC;"></td>
</tr>
</table>

本文エリアと別に、ドラッグ用の右側・下側・右下側に マウスで“掴める”枠エリアを用意してあります。
枠エリア上にマウスカーソルが乗ると、 自動的にドラッグ用カーソル形状に切り替わります。 マウスカーソルの形状をスタイルシートで指定する必要はありません。

このサンプルでは３方向にサイズ変更ができますが、 このうち１箇所だけに“掴める”枠エリアを用意することで、 １方向のみのサイズ変更できるボックスも作成可能です。
（例：縦方向のみに上下できるボックス）

文法解説 

var res1 = new JKL.Resizable( BODY_EREA );

コンストラクタです。本文エリアのidを指定します。
id 文字列でなく、本文エリアのエレメント自体でも指定できます。

res1.resizeTo( WIDTH, HEIGHT );

横×縦のサイズをピクセル単位で指定します。
予めスタイルシート等でサイズを指定してある場合は、
resizeTo() メソッドを使用する必要はありません。
横・縦の片方のみ指定したい場合は、他方は null としてください。 

res1.resizeBy( WIDTH, HEIGHT );

横×縦のサイズをピクセル単位で指定します。（現在のサイズからの相対値）

res1.setEast( EAST_AREA );

右端の枠エリアのidを指定します。
id 文字列でなく、枠エリアのエレメント自体でも指定できます。

res1.setSouth( SOUTH_AREA );

下端の枠エリアのidを指定します。
id 文字列でなく、枠エリアのエレメント自体でも指定できます。

res1.setSouthEast( SOUTHEAST_AREA );

右下隅の枠エリアのidを指定します。
id 文字列でなく、枠エリアのエレメント自体でも指定できます。

更新履歴

コメントはこちらへ by AjaxCom

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/jkl/resizable.html

Kawa.netxp © Copyright 2002-2005 Yusuke Kawasaki