透明感のあるデザインをJavaScriptで実装する（glassbox.js）

2008年8月13日(水) 08:00

GrassBox
ガラスのように透明感のあるデザインをコンテンツに適用してくれるのがglassbox.js。JavaScriptコードで、GrassBoxデザインを適用したい<div>などを指定すると、必要なHTMLタグとスタイル指定が行われる。数行のJavaScriptコードを書くだけで、デザインが適用されるのは非常に分かりやすい。

オプションパラメータの指定で簡単に、Boxを可変サイズに設定もできる。Boxをドラッグできるように設定するなど、便利な機能も豊富に備わっている。

ドラッグ領域の指定方法
GrassBoxを適用しても、そのままではマウスでドラッグ移動する事はできない。準備として、glassbox.jsのほかにprototype.js、scriptaculous.jsをあらかじめインクルードしておく。

あとはGrassBoxオブジェクト作成処理の最後にmyBox.draggable();を呼び出すだけで、ドラッグできるようになる。この際オブジェクト初期化パラメータの dblclick 指定はfalseにしておく。

<script type="text/javascript">
window.onload=function(){
   var myBox = new GlassBox();
   // obj.ini(id, width, height, overflow [, borderskin [, resize [, dblclick ]]]);
   myBox.init( 'myBox', '450px', '360px', 'hidden', '', true, false );
   myBox.lbo( true, 0.50 );
   myBox.draggable();
}
</script>

最新版のダウンロードファイルにはglassbox.jsのほかにprototype.js、scriptaculous.jsの必要なライブラリやスタイルシートなどが含まれている。サンプルコードやGrassBoxのサイトを参考にしていただきたい。

関連する記事