ページ遷移の管理
JavaScripを多く使ったサイトでページ遷移が必要な場合、1つのHTMLに画面を全部いれて(もしくは動的にロードして)、JavaScripで必要な部分だけ書き換えて遷移を行うのがスマートではないかと思います。(HTMLでのページ遷移を使うと、メモリ上のJavaScriptデータをページ間で共有する仕組みが必要になって面倒ですよね。)
ということで、1つのHTMLに定義した画面(ページ)の表示/非表示を管理するクラスを書いてみました。・・といってもやることは
- ページを探しておいて、
- 遷移が実行されると、遷移画面を表示して他を非表示にする
だけです。
使い方
- HTML内にページを作成します。
- 「"page-
"のクラス属性を持つdiv要素」がページと見なされます。 - pageIdには一意なIDを設定しておきます。
- 「"page-
- マネージャを生成します。
- 「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"; } } } }