- 追加された行はこの色です。
- 削除された行はこの色です。
#pgid
** 目次 [#ed644fd2]
#contents
** 概要 [#t0d77bb4]
lightboxのような、同じページ内にBOXを表示させてコンテンツを見せる方法の~
BOX内にHTMLが書けるもの。それがLITBoxです。
LITBoxの使い方について、サンプルを使って説明しています。
- [[LITBoxサンプル１ (LITBoxの基本サンプル) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic.html]]
- [[LITBoxサンプル２ (Optionを指定する) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic2.html]]
- [[LITBoxサンプル３ (メッセージ表示と確認ダイアログを表示する) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic3.html]]
** ダウンロード [#lcd99663]
- Ryan J Lowe’s Dev Blog >> LITBox
http://www.ryanjlowe.com/?p=9
** シンプルなサンプル [#f117b9b2]
- 単に別ページの内容を読み込んでBOX内に表示しているだけです。
-- [[LITBoxサンプル１ (LITBoxの基本サンプル) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic.html]]
#blikimore
- LITBoxの生成部分
new LITBox('http://staff.ark-web.jp/~takemura/public/js/litbox/sample1.html',
{type:'window',overlay:true});
-- COLOR(red):明示的に改行しますが、実際は改行させません
-- 第1引数、別ページの内容を読み込んでくるURL
-- 第2引数、Option値 (次でやります)
** OptionによるBOXの制御 [#nc0f4d80]
- 上の例では、読み込んだBOXの下がやけに長いのが気になりますね。
- LITBoxはOptionでBOXの大きさの制御が可能です。
-- [[LITBoxサンプル２ (Optionを指定する) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic2.html]]
- LITBoxの生成部分
new LITBox('http://staff.ark-web.jp/~takemura/public/js/litbox/sample1.html',
{type:'window',width:400,height:230,left:1,draggable: true,resizable: true});
-- COLOR(red):明示的に改行しますが、実際は改行させません
-- 下記のOption設定をしています。
--- width:400
--- height:230
--- left:1
--- draggable: 可
--- resizable: 可
- Option設定の詳細は下記を参照してください。
*** Option一覧 [#xabeb239]
- Optionの一覧は下記の通りです (2006/12/08現在)
|Option名 |Option値|デフォルト値|備考|h
|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とか書かなくて良い&br;falseにすると中央になる&br;trueは左から 1pxになるが 0pxは指定できない|
|top |上の位置を指定|false|同上|
- その他、「オーバーレイ部分を白じゃなく黒にしたい」などの要求はCSSを変更することで対応してください。
** alert と confirm [#w7715d79]
- 上の例では、type:'window' の場合の実装でした。
-- つまり、非同期通信を利用して外部コンテンツをBOX内に表示させていました。
- 続いて、alert と confirm について説明します。
-- [[LITBoxサンプル３ (メッセージ表示と確認ダイアログを表示する) >http://staff.ark-web.jp/~takemura/public/js/litbox/basic3.html]]
*** alertの場合 [#j4eec3e4]
- LITBoxの生成部分
new LITBox('アークウェブは2006/11/15〜18に社員旅行に行ってきました。',
{type:'alert',width:250,height:80,resizable:false});
-- COLOR(red):明示的に改行しますが、実際は改行させません
-- 第1引数、表示するメッセージ
-- 第2引数、Option値 (type:'alert')
*** confirmの場合 [#scff5bfc]
- LITBoxの生成部分
new LITBox('サイパンには行ったことがありますか?',
{type:'confirm',width:300,height:100,draggable:false,
func:function(){alert('それは良かったですね')}
});
-- COLOR(red):明示的に改行しますが、実際は改行させません
-- 第1引数、確認したいメッセージ
-- 第2引数、Option値 (type:'confirm')
--- func: には[yes]が押された場合に呼ばれる関数を指定できます。
--- ここではJavaScriptのalert標準関数を使って文言を表示させています。
- confirmの使いどころは難しいところですが、alertはAjaxを使わない表示に適していると言えます。
** LITBoxの使いどころは？ [#w7769659]
- アークウェブビジネスブログを参照
-- [[Ajax - LITBox(Lightbox風ダイアログ表示ライブラリ)の一歩先行く使い方>http://www.ark-web.jp/blog/archives/2006/12/how_to_litbox_and_is_it_used.html]]
#blikifooter(竹村)
----
tag:[[Ajax>tag/Ajax]], [[prototype.js>tag/prototype.js]], [[scriptaculous>tag/scriptaculous]]
![[ARK-Web SandBox]](image/sandbox.gif "[ARK-Web SandBox]")
