前回に引き続き、今度は HTML でページ上に表示するウィンドウのようなものを作ってみた。サンプルはこちら。ソースはリンク先で「ソースを表示」して参照してちょ。
Ajax の開発環境である TIBCO が Ajax 上で動作していたり、Ajax で動作するデスクトップ環境なんてものまで存在する昨今、ウィンドウ一つ作って見せたところで別にどってことも無いんだが、それなりにわかりやすいソースを示したサンプルともなるとあんまりないんじゃなかろかのーということで。実用化の再には折りたためたりサイズ変更できたり表示・非表示を制御できるようにしたりして、これまでポップアップウィンドウで実現しようとしていたようなサイトのサイドツール (ヘルプ表示とか、サイトマップとか、メッセンジャーとか) を作るのに応用すると面白いかもね。
今回のサンプルだが、JavaScript にて記述した部分をいじらなければ、以下のような HTML を追記することによって簡単にウィンドウを増やすことができる。
<div class="window" id="ウィンドウID">
<div class="titlebar">
ウィンドウタイトル
</div>
<div class="client">
<!-- ...表示する内容... -->
</div>
</div>
ウィンドウ ID はウィンドウごとに違う文字列を指定する必要があるだよ (ウィンドウの識別に使用している為)。
今回書いてみたサンプルのポイントは以下の通り。
windowMove オブジェクト)。まぁ、結果的にはあんまりオブジェクト指向にした意味無かったけどな。つか、JavaScript って、オブジェクト指向言語なのよ。<body> 要素の onload メッセージハンドラから呼び出す自前の関数の中で、titlebar クラスの <div> 要素を拾い上げて、メッセージハンドラの設定などをやっている。<div> 要素の onmousedown メッセージハンドラから呼び出される処理の中で、動かそうとするウィンドウに結び付けられた windowMove オブジェクトを、変数 capturing_window にセットする。ドラッグ中のマウス移動、およびマウスボタン解放時のハンドラは、<div> 要素のものではなく document のものを使用し、ハンドラの中で変数 capturing_window を参照して、現在移動中のウィンドウとして識別。こうすることで、マウスを思いっきり素早く移動してもちゃんとウィンドウが付いてくるようになる。ウィンドウ移動中でなければ capturing_window には null が入る。onmousedown ハンドラの中で、document.onselectstart メッセージハンドラに return false;onmouseup ハンドラの中で、document.onselectstart メッセージハンドラに return true;
ｺﾒﾝﾄをする