エレメントをマウスでドラッグして移動できます。
Internet Explorer 6.0、 Firefox 1.0、 Opera 8.0 で動作確認をしています。
JKL.Floating は、下記アーカイブ中の jkl-floating.js 単独で動作します。
JKL シリーズのその他の .js ファイルの併用は必須ではありません。
jkl-floating-0.03.tar.gz TAR-GZ
.tar.gz 版と .lzh 版の内容は同じです。（アーカイブ形式のみ違う）
| このエリアは移動できます。 |
シンプルにエレメント全体を掴んで移動できるサンプルです。
簡単なメッセージ表示などに利用できます。
ドラッグ移動中は半透明（透過率50％）となります。
var float1 = new JKL.Floating("area1");
float1.opacity( 1.0, 0.5 );
float1.start();
| FLOATING AND RESIZABLE | |
|
JKL.Floating により、このエリアは移動できます。 JKL.Resizable により、サイズ変更も可能です。 フォームも利用可能です。 |
|
テーブルのタイトルバー部分のみを掴めるようにしたサンプルです。
テーブルの本体部分は、ドラッグ移動できない代わりに、
フォームも利用可能ですし、リンクやテキスト選択できます。
また、JKL.Resizable も併用することで、
右側・下側のバーを掴んでウインドウサイズも変更可能としています。
var float2 = new JKL.Floating("area2_dialog","area2_head");
float2.opacity( 1.0, 0.5 );
float2.start();
var resize2 = new JKL.Resizable("area2_dialog");
resize2.resizeTo( 480, 120 );
resize2.setEast( "area2_east" );
resize2.setSouth( "area2_south" );
resize2.setSouthEast( "area2_southeast" );
var float1 = new JKL.Floating( BODY_ID, HEAD_ID );
コンストラクタです。
移動する要素本体のidと、
マウスで掴んでドラッグ操作するための要素（タイトルバーなど）のidを指定します。
HEAD_ID を省略した場合は、移動する要素本体の全体のどこでもマウスで掴んでドラッグできます。
要素の id 属性の文字列でなく、
getElementById()等で取得したエレメント自体でも指定できます。
float1.start();
フロート処理を開始し、ドラッグ移動できる状態となります。
ドラッグ可能にする場合は start() メソッドの使用は必須です。
float1.opacity( DEFAULT_OPAC, DRAG_OPAC );
通常時の透明度と、ドラッグ中の透明度を指定します。
0〜1 までの値で、0.0 なら非表示、1.0 なら透過しないとなります。
※Opera8 では、透明度は無視されます。
float1.moveTo( X, Y );
エレメントを指定座標に移動します。
座標はページの左上が ( 0, 0 ) となるピクセル単位の絶対座標指定です。
ただし、position: abolute または relative な上位要素があれば、
その要素からの相対座標となります。
float1.moveBy( X, Y );
エレメントを現在位置からの指定オフセットに移動します。
( 0, 0 ) なら移動しません。
( 100, 0 ) なら右方向に 100 ピクセル移動します。
( 0, -50 ) なら上方向に 50 ピクセル移動します。
float1.moveCenter();
エレメントをウインドウの中心に移動します。
float1.moveLeft( X ); float1.moveRight( X ); float1.moveTop( Y ); float1.moveBottom( Y );
エレメントをウインドウの端（左端・右端・上端・下端）に移動します。
端からの距離（オフセット値ピクセル数）も指定できます。
指定しない場合は、端に寄せます。
トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/jkl/resizable.html
Kawa.netxp © Copyright 2002-2005 Yusuke Kawasaki