MacOSXデザインのウィンドウをWEBで表現するAjax導入方法
2007年06月17日 公開
今回はMacのウィンドウをあなたのサイトに導入してみよう。
prototype.jsを使ったウィンドウを作るためのJavaScript。
まず必要なファイルや導入方法は以下に書いてある。
http://prototype-window.xilinus.com/
ところが、英語が苦手な人なら間違いなく導入を敬遠してしまうのではないかと思うほど、ダウンロードしたファイルがわかりにくい。
ダウンロードしてみると色々なサンプル、デモがありますが、今回はそこからさらにわかりやすいように分解してみようかと思います。
サンプルを見る
著者で発行されている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を開き中を色々いじってみるとわかりやすいかもしれませんね。
導入が簡単なところもポイントが高い。
私が圧縮したサンプルはごく一部であり、本家サイトでは様々なデモが紹介されている。
本家デモページ
ログインウィンドウや、他のサイトを読み込むウィンドウまで様々。
興味がある場合は是非ともいろいろチャレンジしてみてください。
本家ダウンロードページ