サイト内にウィンドウを開く「Prototype Window 」

このエントリーをはてなブックマークに追加

Prototype Windowはウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。

Prototype WindowはPrototype.jsを拡張するUIライブラリです。

また、「script.aculo.us 」のエフェクトも利用することが可能です。

利用方法

まずは、配布ページよりPrototype Window 本体をダウンロードします。

ダウンロードしたファイルから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の表示や特定のエレメントの表示など様々な機能が用意されています。

ライセンスはMITライセンスですので著作権表示さえ消さなければ自由に利用することが可能です

スポンサードリンク

«どうもGoogleから嫌われたようです。 | メイン | feed meterに参加しました。»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1057
コメントを投稿