ページ内に他のページやコンテンツを表示する

iBoxはコンパクトなサイズでありながら 、ページ内に他のページや、同一ページ内にあるコンテンツを表示させることもできます。他のページを表示する場合にはAjaxの制限である同一ドメイン上にあるHTMLファイルしか表示できないという点には注意してください。

まず、他のページを表示する場合を見てみましょう。<a>タグのhref属性に表示したいページのURLを指定します。rel属性にはiboxの文字を指定します。これは、前に説明した画像の表示方法と全く変わりません。ただ、ページを表示する場合には横幅と縦幅を指定できます。横幅はwidthで、縦幅はheightで指定することができます。この指定方法はrel属性でiboxと一緒に指定します。例えば横幅を320ピクセル、縦幅を240ピクセルで表示する場合は以下のように指定します(サンプル03)。横幅だけ、縦幅だけという指定も可能です。

<a href="～" rel="ibox&width=320&height=240">～</a>

サンプル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="css/ibox.css" type="text/css">
        <script type="text/javascript" src="js/ibox.js"></script>
        <title>iBoxサンプル</title>
    </head>
    <body>
    <h1>iBoxサンプル</h1>
        <div>
            <a href="sample.html" rel="ibox&width=320&height=240" title="簡易説明">説明を表示</a>
        </div>
    </body>
</html>

他のHTMLファイルではなく、同一ページ内にあるブロックを表示させることもできます。この場合はhrefにアンカー、rel属性にiboxを指定します。その際に横幅を示すwidth、縦幅を示すheightも同時に指定することができます(サンプル04)。

<a href="#explanation" rel="ibox&width=320&height=120">

サンプル04の実行結果

サンプル04

<!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="css/ibox.css" type="text/css">
        <script type="text/javascript" src="js/ibox.js"></script>
        <title>iBoxサンプル</title>
    </head>
    <body>
    <h1>iBoxサンプル</h1>
        <div>
            <a href="#explanation" rel="ibox&width=320&height=120" title="簡易説明">説明を表示</a>
        </div>
        <div id="explanation" style="visibility:hidden">
            <h2>iBoxとは何ですか?</h2>
            <p>
                iBoxは画像を写真風に表示する軽量なライブラリです。<br>
                画像だけでなく同一ドメイン上にあるHTMLファイルなどを表示することもできます。
            </p>
        </div>
    </body>
</html>