#pgid
** 目次 [#ed644fd2]
#contents
** 概要 [#t0d77bb4]
lightboxのような、同じページ内にBOXを表示させてコンテンツを見せる方法の~
BOX内にHTMLが書けるもの。それがLITBoxです。
LITBoxの使い方について、サンプルで説明しています
** ダウンロード [#lcd99663]
- Ryan J Lowe’s Dev Blog >> LITBox
http://www.ryanjlowe.com/?p=9
** シンプルなサンプル [#f117b9b2]
- 単に別ページの内容を読み込んでBOX内に表示しているだけです。
-- [[LITBoxサンプル１>http://staff.ark-web.jp/~takemura/public/js/litbox/basic.html]]
** OptionによるBOXの制御 [#nc0f4d80]
- 上の例では、読み込んだBOXの下がやけに長いのが気になりますね。
-- LITBoxはOptionでBOXの大きさの制御が可能です。
-- [[LITBoxサンプル２>http://staff.ark-web.jp/~takemura/public/js/litbox/basic2.html]]
*** Option一覧 [#xabeb239]
- Optionの一覧は下記の通りです (2006/12/08現在)
|Option名 |Option値|デフォルト値|備考|
|width |ピクセル値を指定|600|pxとか書かなくて良い|
|height |ピクセル値を指定|500|同上|
|type |'window', 'alert', 'confirm'のいずれか|'window'||
|func |confirmで[yes]が押された場合に呼ばれる関数名|null|confirmの場合のみ|
|draggable|BOXをドラッグできるようにするかどうか|true||
|resizable|BOXをリサイズできるようにするかどうか|true||
|overlay |オーバーレイを使用するかどうか|true||
|opacity |透明度を指定|1|0〜1で小数可。1が透明度なし|
|left |左の位置を指定|false|pxとか書かなくて良い。falseにすると中央になる。trueは左から 1pxになるが 0pxは指定できない|
|top |上の位置を指定|false|同上|
- その他、「オーバーレイ部分を白じゃなく黒にしたい」などの要求はCSSを変更することで対応してください。
** alert と confirm [#w7715d79]
- 上の例では、type:'window' の場合の実装でした。
- 続いて、alert と confirm については↓このサンプルで確認してください。
-- [[LITBoxサンプル３>http://staff.ark-web.jp/~takemura/public/js/litbox/basic3.html]]
![[ARK-Web SandBox]](image/sandbox.gif "[ARK-Web SandBox]")
