ウィンドウ表示オプションを指定する

LITBoxでは、どのようにウィンドウを表示するかを指定することができます。これはnew LITBox()の2番目のパラメータで指定します。例えば、横幅480ピクセル、縦幅260ピクセルで表示する場合には以下のように指定します（サンプル02）。

    new LITBox("sample.html", { type:"window", width:480, height:260 });

サンプル02の実行結果

サンプル02

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="LITBox/litbox.css" type="text/css">
            <script type="text/javascript" src="LITBox/prototype.js"></script>
            <script type="text/javascript" src="LITBox/scriptaculous.js"></script>
            <script type="text/javascript" src="LITBox/litbox.js"></script>
            <script type="text/javascript"><!--
            window.onload = function(){
                Event.observe($("openWin"), "click", function(){
                    new LITBox("sample.html", { type:"window", width:480, height:260 });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">ページを表示</a>
            </div>
        </body>
    </html>

ウィンドウ幅だけでなく、表示位置やリサイズするかどうかなども指定することができます。サンプル03は横幅480ピクセル、縦幅260ピクセル、表示位置(100, 50)、リサイズ不可の状態でウィンドウを表示します。

サンプル03の実行結果

サンプル03

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="LITBox/litbox.css" type="text/css">
            <script type="text/javascript" src="LITBox/prototype.js"></script>
            <script type="text/javascript" src="LITBox/scriptaculous.js"></script>
            <script type="text/javascript" src="LITBox/litbox.js"></script>
            <script type="text/javascript"><!--
            window.onload = function(){
                Event.observe($("openWin"), "click", function(){
                    new LITBox("sample.html", {
                        type:"window", width:480, height:260,
                        left:100, top:50,
                        resizable: false
                    });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">ページを表示</a>
            </div>
        </body>
    </html>

LITBoxではウィンドウ、アラートダイアログ、確認ダイアログの種類に関わらず以下の表のオプションを指定することができます。

width 横幅
height 縦幅
type ウィンドウの種類'window','alert','confirm'のいずれか
func 確認ダイアログでYesボタンが選択された場合に実行する関数
draggable ドラッグ可能かどうかを示すフラグ(true:可能、false:不可)
resizable リサイズ可能かどうかを示すフラグ(true:可能、false:不可)
overlay オーバーレイを使用するかどうかのフラグ(true:使用、false:不使用)
opacity ウィンドウ全体の不透明度
left ブラウザウィンドウで表示するX座標
top ブラウザウィンドウで表示するY座標