フローティングウィンドウを表示する「Prototype Window」-JavaScript Library Archive

フローティングウィンドウを表示する「Prototype Window」

配布元：Prototype Window
ライセンス：MIT-style license

Prototype WindowはPrototype.jsを拡張するUIライブラリで、ウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。
また、Prototype.jsのアニメーションライブラリである「script.aculo.us 」のエフェクトも利用することが可能です。

利用方法

ダウンロードしたファイルからwindow.jsとprototype.jsをhead要素内などで読み込みます。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="window.js"></script>

次にテーマCSSを読み込みます。
Prototype Windowでは開くウィンドウの形状がテーマとして複数用意されています。

今回はデフォルトテーマを利用しますので、default.cssを読み込みます。

<link href="default.css" rel="stylesheet" type="text/css"/>

読み込んだテーマCSSと同階層にテーマフォルダを配置しなくてはいけないので気をつけてください。

次にウィンドウのオープンアクションを設定します。

<lscript type="text/javascript">
var openWin = function(){
	var win = new Window({className: "dialog", width:350, height:400, zIndex: 100, title: "Sample window"})
	win.getContent().update("<h1>Hello world !!</h1>");
	win.showCenter();
}
</script>

new Windowではwidthで開くウィンドウの横幅、heightで高さ zIndexで深度(複数ウィンドウを開いた際の重なり具合)をtitleでタイトルを設定できます。

classNameは複数テーマを使い分ける際に利用しますが今回はデフォルトのdialogを利用します。

Content().updateでウインドウの内容を設定します。

最後にウィンドウを開く命令showCenter()を記述しておきます。

XHTMLではウィンドウを開く命令を書きたい場所に「onclick=”openWin()”」と記述します。

サンプルではボタンを配置します。

<input type="button" value="ウィンドウを開く" onclick="openWin()" />

サンプル

非常に簡単に素敵なウィンドウが生成されます。

script.aculo.usを利用する

script.aculo.usを利用することにより様々なアニメーションを設定することが可能です。

script.aculo.usを利用する際にはscript.aculo.usのベースファイルである「effects.js」も読み込みます。

<script type="text/javascript" src="effects.js"></script>

new Window時にウィンドウの動作にエフェクトをかけることが可能になります。

var win = new Window({className: "dialog", width:350, height:400, zIndex: 100, title: "Sample window", showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff})

サンプル

テーマを変更する

Prototype Windowの魅力は様々なテーマが用意されていることです。

テーマCSSとテーマフォルダをアップロードしclassNameにテーマ名を指定すれば任意のテーマのウィンドウを開くことが可能です。

var win = new Window({className: "darkX", width:350, height:400, zIndex: 100, title: "Sample window"})

サンプル

他にもurlの表示や特定のエレメントの表示など様々な機能が用意されています。

スポンサードリンク

カテゴリー：prototype.js script.aculo.us フローティングウィンドウモーダルウィンドウライブラリ表示

直前:jQuery版のLightBox「ThickBox」

直後:word-break:break-allを実現する「wordBreak.js」

フローティングウィンドウを表示する「Prototype Window」 JavaScript Library Archive