Prototype Window Classの使い方

ページ内にサブウインドウを表示するAjaxライブラリPrototype Window Classの使い方の覚書です。
»Prototype Window Class : Introduction

»サンプルを表示
クリックするとページ内にサブウインドウにPrototype Window Class : Introductionを表示します。

Prototype Window Classの特徴

サブウインドウをレイヤーとして表示

Prototype Window Classはサブウインドウをページ内にレイヤーとして表示します。ポップアップブロックによる表示制限を受けることがありません。

多機能なサブウインドウ

閉じる,最大化、最小化やドラッグ&ドロップが可能でです。

Prototype Window Classの使い方

Prototype Window Classのダウンロード

Prototype Window Classをダウンロードして解凍します。
»Prototype Window Class : Introduction

必要ファイルのアップロード

ウインドウを表示するために必要なファイルをアップロードします。下記のファイルは基本的なウインドウの場合です。

prototype.js
effects.js
window.js
default.css
defaultフォルダの画像

default.cssは利用画像を相対パスで記載しています。FC2などのディレクトリがアップロードできない場合は、default.cssを修正します。

例) url(default/bottom_left.gif) → url(bottom_left.gif)

必要ファイルの読み込み

head要素でアップロードした一連のファイルを読み込みます。

<script type="text/javascript" src="●●●/prototype.js" charset="utf-8"></script>
<script type="text/javascript" src="●●●/effects.js" charset="utf-8"></script>
<script type="text/javascript" src="●●●/window.js" charset="utf-8"></script>
<link href="●●●/default.css" rel="stylesheet" type="text/css"/ charset="utf-8" />

FC2ブログなど文字コードがUTF-8以外の場合はtype="text/css"/ charset="utf-8"をつけるのが無難です。

関数の定義

クリックされたときに呼び出す関数を定義します。

<script type="text/javascript">
function openWindow(){
var win = new Window("cubewin", {
title: "cubu Labo Sample", className: "dialog", top:50, left:120, zIndex: 100,
width:400, height:300,
resizable: true, draggable:true, url:"http://prototype-window.xilinus.com/"
});
win.setDestroyOnClose();
win.showCenter(); // センターに表示
}
</script>

呼び出し

Prototype Window Classを呼び出すリンクを記述します。

<a href="javascript: return false;" onclick="openWindow();">サンプルを表示</a>

参考記事
»Prototype Window Class : Introduction
»Prototype Window Classリファレンス
»Prototype Javascript Windowsがパワーアップ。「Prototype Window Class」: Recently Ajax

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方