前の記事 ≪:WEB DB PRESS Vol.33
次の記事 ≫:Ajaxフレームワークでワールドカップ

LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox

2006年06月21日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Ryan J Lowe’s Dev Blog Blog Archive LITBox

LITBox 2.0 has just been released. This version of LITBox is basically a few modifications of Thickbox made into a Prototype class based off of the Scriptaculous.

LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox。
LightBox2同様、prototype.jsとscriptaculous.jsをベースにクラスベースでコーディングされていて、使い方は簡単です。

必要なスクリプト/CSSを読み込んだ後、次のようにonclickイベントでnewするだけです。

<input type="button" onclick="new LITBox('/',{type:'window',overlay:true});" value="NEW LITBox" />
<input type="button" onclick="new LITBox('You Clicked this!!',{type:'alert',overlay:false,width:150,height:50});" value="NEW LITBox Alert" />
<input type="button" onclick="new LITBox('Are you sure?',{type:'confirm',overlay:false,func:when_yes,width:180,height:100});" value="NEW LITBox Confirm" />

引数に渡す type の値次第で挙動が変わります。

typeがwindowの場合は、次のように、第一引数で指定したページを開くことが可能です。

コード: <input type="button" onclick="new LITBox('/',{type:'window',overlay:true});" value="NEW LITBox" />



typeがalertの場合は次のようなメッセージダイアログになります。

コード: <input type="button" onclick="new LITBox('You Clicked this!!',{type:'alert',overlay:false,width:150,height:50});" value="NEW LITBox Alert" />



typeがconfirmの場合は次のようにYES/NOダイアログになります。

コード: <input type="button" onclick="new LITBox('Are you sure?',{type:'confirm',overlay:false,func:when_yes,width:180,height:100});" value="NEW LITBox Confirm" />



その他の引数は次の通り。

width - 幅
height - 高さ
func - type=confirm時にyesが押された場合のコールバック関数
draggable - ドラッグ可能かどうか(true/false)
resizable - リサイズできるかどうか(true/false)
overlay - オーバーレイマスクをかけるか。LightBox風にするかどうか。(true/false)
opacity - 透明度設定

これもまた便利ですね。
それにしても、LightBoxのように、これだけ派生したライブラリが出来るってすごいことですね。

関連エントリ:
 画像やページをLightBox風に表示できるThickbox
 LightBox.jsにスライドショー機能を追加するSlidebox
 同一ページ内でポップアップウィンドウを開くJavascriptライブラリ GreyBox
 Lightbox JSを拡張したLightbox Plus

関連の記事検索:JavaScript, Ajax, lightbox
スポンサード リンク

By.KJ : 2006年06月21日 09:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)