ページ遷移の管理

JavaScripを多く使ったサイトでページ遷移が必要な場合、1つのHTMLに画面を全部いれて(もしくは動的にロードして)、JavaScripで必要な部分だけ書き換えて遷移を行うのがスマートではないかと思います。(HTMLでのページ遷移を使うと、メモリ上のJavaScriptデータをページ間で共有する仕組みが必要になって面倒ですよね。)

ということで、1つのHTMLに定義した画面(ページ)の表示/非表示を管理するクラスを書いてみました。・・といってもやることは

• ページを探しておいて、
• 遷移が実行されると、遷移画面を表示して他を非表示にする

だけです。

使い方

1. HTML内にページを作成します。
   • 「"page-"のクラス属性を持つdiv要素」がページと見なされます。
   • pageIdには一意なIDを設定しておきます。
2. マネージャを生成します。
3. 「to(pageId)」で指定した画面に遷移します。

サンプル。

<!-- メニュー。項目を選択するとそのページに飛ぶ-->
<div id="menu">
    <a href="javascript:mng.to('a');">A</a>
    <a href="javascript:mng.to('b');">B</a>
    <a href="javascript:mng.to('c');">C</a>
    <a href="javascript:mng.to('d');">D</a>
</div>

<!-- ページ -->
<div class="page-a page">ページA</div>
<div class="page-b page">ページB</div>
<div class="page page-c">ページC</div>
<div class="page page-d">ページD</div>

<script type="text/javascript">
    // ページ管理オブジェクトの生成
    mng = new util.PageManager();
    mng.to("a"); // 初期ページはA
</script>

サンプルを見る

実装

/**
 * ページ管理オブジェクト
 * - ページ(classがpage-*のdiv要素)の表示/非表示を管理する。
 * - アクティブなページのみ表示。他はすべて非表示とする。
 */
util.PageManager = function () {
    this.init();
}
util.PageManager.prototype = {
    contstructor: util.PageManager.prototype.contstructor,

    /**
     * マネージャを初期化する。
     */
    init: function() {
        var list = document.getElementsByTagName("div");
        this.pages = {}
        var reqexp = /page-([a-zA-Z_]+)/;
        for ( var i=0; i<list.length; i++ ) {
            if (  reqexp.test( list[i].className ) ) {
                this.pages[RegExp.$1] = list[i];
            }
        }
    },

    /**
     * ページを移動する。
     * @param {String} pageId 表示するページのID(class名の"page-"以降の部分)
     *                         例) "page-hoge"の場合、 "hoge"
     */
    to: function( pageId ) {
        for ( var page in this.pages ) {
            if ( page == pageId ) {
                this.pages[page].style.display = "block";
                //this.pages[page].style.visibility = "visible";
                // visibilityを使うと非表示の要素の領域も確保される。
            } else {
                this.pages[page].style.display = "none";
                //this.pages[page].style.visibility = "hidden";
            }
        }
    }
}