【ハウツー】ゼロからはじめるGreyBox - 一歩先行くウィンドウ表示 (4) 他のページを表示する | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるGreyBox - 一歩先行くウィンドウ表示

4 他のページを表示する

古籏一浩　 [2007/07/20]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

他のページを表示する

GreyBoxは画像の表示だけでなく他のページも読み込んで同一ページ上に表示させることができます。GreyBoxでは他のページはインラインフレーム内に表示されます。

他のページを表示する場合には<a>タグのrel属性にrel="gb_page[横幅, 縦幅]"を指定します。横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値で指定します。サンプル07では以下のように指定しています。

    <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]">～</a>

これは毎日就職ナビのページを横幅480ピクセル、縦幅360ピクセルで表示します。


サンプル07の実行結果	画像ではなくリンク先をウィンドウに表示させることができる

サンプル07

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]">
                    毎日就職ナビのページ表示
                </a>
        </body>
    </html>

サンプル07ではウィンドウは上部に表示されますが、ウィンドウの中央に表示させることもできます。この場合は<a>タグのrel属性にgbpagecenter[横幅, 縦幅]を指定します。サンプル08では以下のように横幅480ピクセル、縦幅360ピクセルで中央に表示しています。

    <a href="http://job.mycom.co.jp/" title="job" rel="gb_page_center[480,360]">～</a>


サンプル08の実行結果	ボックスの表示位置を中央に変化させている

サンプル08

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="http://job.mycom.co.jp/" title="job" rel="gb_page_center[480,360]">
                    毎日就職ナビのページ表示
                </a>
        </body>
    </html>

指定したサイズではなく、ウィンドウサイズに合わせて最大で表示することもできます。この場合は<a>タグのrel属性にgbpagefs[]を指定します。サンプル09ではウィンドウのサイズに合わせて最大で表示します。また、ウィンドウをリサイズした場合でも自動的に最大になるように調整が行われます。


サンプル09の実行結果	ウィンドウサイズが拡大されている

サンプル09

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="http://job.mycom.co.jp/" title="job" rel="gb_page_fs[]">
                    毎日就職ナビのページ表示
                </a>
        </body>
    </html>

ウィンドウに表示されるページをグループ化して扱うことができます。この場合は<a>タグのrel属性にgb_pageset[グループ名]を指定します。グループ名は任意の文字列を指定することができます。複数の異なるグループ名を指定した場合、それぞれ別のグループとして処理されます。


サンプル10の実行結果	ウィンドウに表示されるページをグループ化すると

複数のリンク先を矢印で制御して	表示させることができる

GreyBoxはprototype.jsやjQueryライブラリなど汎用ライブラリを利用できない場合に便利です。また、必要なファイルがgreyboxフォルダにまとめられているため、他のプログラムファイルやスタイルシートファイル名と干渉することがないのもメリットの1つと言えるでしょう。

サンプル10

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <ul>
                <li><a href="http://job.mycom.co.jp/" title="job" rel="gb_pageset[favPage]">
                        毎日就職ナビのページ表示
                </a></li>
                <li><a href="http://www.openspc2.org/" title="OpenSpace" rel="gb_pageset[favPage]">
                        OpenSpaceのページ表示
                </a></li>
                <li><a href="http://www.mycom.co.jp/" title="毎コミ" rel="gb_pageset[favPage]">
                        マイコミのページ表示
                </a></li>
        </body>
    </html>