script.aculo.usが何かと便利だ。
とか書いていると、
「prototype.jsマンセーな人か？｝
という突っ込みを受けそうですが、
否定はしません。
jQueryよりprototype.jsが好きです。
HTML制作をする上で、使いやすいのは多分圧倒的にjQueryなんだと思いますが、
いかにもjavascriptを拡張したっぽいprototype.jsのが親しみを感じるのです。個人的に。
閑話休題・・・いや、、、本題へ。
script.aculo.usには便利な機能が満載。フロートできる要素の設定も簡単だったので紹介。
まずは、例のごとくHTMLにライブラリをロードしなければお話になりません。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
うえの二つは、script.aculo.usのベースライブラリ。
最後のひとつは、フロートできる要素を作ったり、ドロップできる要素をつくったりしたいときに呼び出すライブラリです。
script.aculo.usのダウンロードはこちらから。
次に、フロートしたいブロック要素をつくります。
<div id="float">これをフロート</div>
当たり前ですが、IDはページ内でユニークなものを設定しましょう。
最後にjavascriptでフロートを作成です。
<script type="text/javascript">
new Draggable('float');
</script>
↑これだけです。引数には、フロートしたい要素のIDを指定します。
まぁ、普通は、onloadで呼び出す関数などに入れておいて、
ページ読み込み完了時 にこの命令が有効になるようにしたほうがいいので、
実際は、
<script type="text/javascript">
function loadFunction(){
new Draggable('float');
}
</script>
↑JSソースにはこのように書いておき、
<body onload="loadFunction();">
↑<body>
タグにこのようにonload属性をつけて、関数を呼び出すのが筋でしょうか。
onload属性を使うのがかっちょわりぃなぁという人もいると思いますが、
ソース書くのが面倒なので、自分で考えて書いてください。
あとは、フロートしたDIVにスタイルシートで飾りをつけてやれば、そこそこWindowっぽいものが出来上がります。
色々ゴニョゴニョしてやれば、擬似ウィンドウもできますから、自分専用の擬似ウインドウライブラリを作っておくと何かと便利だと思ったり。
上記例では、関数「Draggable」にはひとつしか引数を渡していませんが、
第二引数でオプションを設定可能です。
<script type="text/javascript">
new Draggable(
'float',
{
ghosting : true,//ゴーストを表示させるか？ true|false
revert : true,//移動後元の位置に戻すか？ true|false
starteffect: function() {//ドラッグ開始時によばれる関数
},
endeffect: function() {//ドラッグ終了時に呼ばれる関数
}
}
);
</script>
だいたいこんな感じです。
ほかにも沢山オプションがありますし、
フロート指定した要素に「onDrag」（ドラッグ開始のとき）などの、
イベントハンドラが追加されます。
詳しくは公式ページをご覧下さい。
handleというオプションを使うとD&Dできるようになるらしいですが、
未確認のため、今回は記事には書きません。
javascriptで広告とかをフロートさせるライブラリが何万円で売ってることがありますが、
これなら安上がり？
script.aculo.usはMITライセンスだから、自分でつくって売ってもウマー（←あんまり感心しませんがね）