LITBoxを使う

それでは実際にLITBoxを使ってみます。ここではsample.htmlファイルをページ内に表示します。sample.htmlファイルには画像とテキストが書かれています。また、フォルダ構成は下図のようになっています。

本稿のフォルダ構成

LITBoxはページを非同期通信で読み込む際にprototype.jsライブラリ、エフェクト/ドラッグ処理にscriptaculousライブラリを使用しています。これらのライブラリはLITBoxをダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。LITBoxを使用する前には、これら2つのライブラリを読み込ませる必要があります。読み込ませる時には必ず最初にprototype.jsライブラリ、次にscript.aculo.usライブラリの順番で読み込ませます。

    <script type="text/javascript" src="LITBox/prototype.js"></script>
    <script type="text/javascript" src="LITBox/scriptaculous.js"></script>

これら2つのライブラリを読み込ませたらLITBoxのスクリプトファイルを読み込ませます。

    <script type="text/javascript" src="LITBox/litbox.js"></script>

LITBoxを使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはlitbox.cssで以下のようにして読み込ませます。

    <link rel="stylesheet" href="LITBox/litbox.css" type="text/css">

これでLITBoxを利用する準備が完了です。それでは実際のHTMLコードを見ていきます。LITBoxでは独自のウィンドウオブジェクトを生成することでページ内にウィンドウを表示する仕組みになっています。このウィンドウの生成を行うには以下のようにします。

    new LITBox("sample.html");

パラメータに表示したいファイルのパスを指定します。前にも書きましたが、他のサイトのURLは指定できません。LITBoxはウィンドウだけでなく、アラートダイアログや確認ダイアログもサポートしています。このウィンドウの種類を指定する場合には、new LITBox()の2番目のオプションでtypeを指定します。明示的にウィンドウを表示するように指定するには以下のようにします。

    new LITBox("sample.html", { type:"window" });

typeで指定できるパラメータを以下の表に示します。

window ウィンドウ
alert アラートダイアログ
confirm 確認ダイアログ

サンプル01はリンクがクリックされたらsample.htmlページを表示します。

サンプル01の実行結果

リンクをクリックするとsample.htmlが表示される

LITBoxは非同期通信でファイル内容を読み込みページ上に表示します。このため、ブラウザによっては読み込んだページのスタイルが元のページに影響を及ぼすことがあります。例えばFirefoxでサンプル01を実行すると、以下のように見出し部分のスタイルが表示前と表示中で異なってしまいます。

リンククリック前の見出し表示

クリック後ページ表示中は見出しのデザインが変わる

使用する際には、このような点にも注意が必要です。

サンプル01

    <!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" });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">ページを表示</a>
            </div>
        </body>
    </html>