floatingLayer

レイヤを浮遊させる

定義クラス

floatingLayer: 浮遊するレイヤクラス
　(リファレンス)

依存ライブラリ

xbrowser

サポート・ブラウザ

Internet Explorer 6 for Windows ( 5 でもいけるはず）
Opera 7.6 for windows
Firefox 1.0 以上 for Windows

特徴

HTMLエレメントをドラッグ可能にします。
簡単生成。nazono.floatingLayer.get( エレメントのID ).show(event); で、とりあえず生成されます。
ドラッガブル。レイヤのどこかをクリックしながらドラッグすると動きます。
マルチウィンドウ。何枚でも生成できます。
自動消去。floatingLayer以外をクリックすると消えます。（ autohide = false を設定することで消えないようにもできます）
Windows IE上では、バグによりselectボックス( )が常にレイヤの前に来ますが、floatingLayerはその表示時に、自動的に背後のselectボックスを非表示にします。
もうすこし高度な「ウィンドウ」用には floatingWindow があります。

用例

<script src="xbrowser.js"></script> <script src="floatingLayer.js"></script> <script> function show_huga(event){ var huga=nazono.floatingLayer.get( 'huga' ); huga.autohide=false; // 自動的に隠さない if( huga.isVisible() ){ huga.hide(); // 隠す }else{ huga.show(event); // マウス近くに表示 } } function show_hoge(event){ var hoge=nazono.floatingLayer.get( 'hoge' ); hoge.dontdrag=true; // ドラッグできない hoge.show(200,200); // 固定位置に表示 } </script> <input type="button" onclick="show_huga(event);" value="show/hide huga"> <div style="display:none;"> <div id=huga style="background:#EEE"> ドラッグできるレイヤ。<br> 自動的に隠れない<br> <input type="button" onclick="show_hoge(event);" value="show hoge"> </div> <div id=hoge style="background:#CCF"> ドラッグできないレイヤ。<br> レイヤ外をクリックすると自動的に隠れる<br> </div> </div>

リファレンス

リファレンス

ダウンロード

floatingLayer.js

top / nazo.yi.org / nazonoDiary