このCookBookでは、ページ遷移後にグローバルナビを非表示にする方法について説明していきます。
特別な理由でページ遷移後にグローバルナビを非表示にしたい場合に利用してください。
また、iframeを利用する際にグローバルナビが不要な場合にも利用できます。
完成イメージ
1. はじめはグローバルナビが表示されています。
2. HeadWithContainerThemeBuilder のリンクをクリックする。
3. ページ遷移後はグローバルナビが表示されません。
完成サンプル
以下の完成サンプルをダウンロードしてご活用ください。
e builder プロジェクト : im_cookbook_111393_pagebuilder.zip
imm ファイル : im_cookbook_111393_pagebuilder-1.0.0.imm
ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/111393/page
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart
レシピ
- ページ遷移するリンクを作成する
- 適用したいPageBuilderを、リクエストへのパラメータに指定する
1. ページ遷移するリンクを作成する
ページ遷移するリンクを作成します。
|
1 |
<a href="im_cookbook/111393/page">page transition</a> |
2. 適用したいPageBuilderを、リクエストへのパラメータに指定する
PageBuilderは、テーマモジュールのJSSPとコンテンツを組み合わせたHTMLを生成します。
PageBuilderは6つの実装があり、目的によってPageBuilderを使い分けてください。
詳しくは、以下のドキュメントをご覧ください。
- [テーマ仕様書] - [PageBuilder]
適用したいPageBuilderを、リクエストへのパラメータとして指定してください。
今回は、PageBuilderの実装の1つであるHeadWithContainerThemeBuilderを利用しましょう。
HeadWithContainerThemeBuilderは、以下の特徴があります。
- header（メニューやユーティリティ）が表示されない。
- footer が表示されない。
- HTMLの head タグが読み込まれるため、CSSやクライアントサイドJavaScriptが利用できる。
HeadWithContainerThemeBuilderを利用するためには、imui-theme-builder-moduleというキーに、headwithcontainerという値をリクエストパラメータとして指定してください。
|
1 |
<a href="im_cookbook/111393/page?imui-theme-builder-module=headwithcontainer">page transition</a> |
作成したリンクをクリックしてページ遷移すると、グローバルナビは表示されません。
終わりに
このCookBookで利用したPageBuilderであるHeadWithContainerThemeBuilder以外にも、PageBuiderの実装があります。
また、設定ファイルを利用してPageBuilderを指定することも可能です。
詳しくは以下のドキュメントをご覧ください。
- [テーマ仕様書] - [PageBuilder]
