MacOSXデザインのウィンドウをWEBで表現するAjax導入方法

サンプルを見る

著者で発行されているAjaxファイルの中にあるサンプルで、わかりやすいものをまず使ってみましょう。ためしに私のサーバーでアップしてみました。
サンプルデモ
個人的に、ウィンドウの位置をクッキーで覚えさせているところがすごいポイント高いと思っています。



背景黒のボタンがOSXのスタイル。
動きがなかなか素敵です。
もう一つのスタイルのサンプル


この二つのサンプルファイルを余計なファイルを省いて、zip圧縮しておきましたので、downloadしてソースを確認してみてください。
(2007.6.17 22:06 index2.htmlファイルが入っていなかったため追加)

ポイントは以下の3点です

１）JavaScriptの呼び出し
<script type="text/javascript" src="javascripts/prototype.js"> </script>
<script type="text/javascript" src="javascripts/effects.js"> </script>
<script type="text/javascript" src="javascripts/window.js"> </script>
<script type="text/javascript" src="javascripts/window_ext.js"> </script>
<script type="text/javascript" src="javascripts/debug.js"> </script>

２）リンクにonclickの追加
<a href="#" onclick="win1.show();">open window1</a>

３）最後に定義
<script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "Sample1", width:200, height:150, top:70, left:100}); win1.getContent().innerHTML = "素晴らしいソフトウェアですね";
</script>


Ajaxを使うときは個人的にUTF-8にいつも変換していますが、このシステムは何故かシフトJISでも動いているので、そのまま圧縮しています。

まずはindex.htmlとindex2.htmlを開き中を色々いじってみるとわかりやすいかもしれませんね。

導入が簡単なところもポイントが高い。
私が圧縮したサンプルはごく一部であり、本家サイトでは様々なデモが紹介されている。
本家デモページ

ログインウィンドウや、他のサイトを読み込むウィンドウまで様々。


興味がある場合は是非ともいろいろチャレンジしてみてください。
本家ダウンロードページ