機能説明

ヘッダ部左端に、任意のページに遷移のボタンを備えたヘッダを表示します。
  • このタグはスマートフォン用の画面向けにデザインされています。
  • data-role属性に“content”を指定したdivタグの前(ヘッダ位置)に記述してください。

属性一覧

注釈 属性名 説明 省略時の動作
buttonIcon String ボタンのアイコンを指定します。
使用可能なアイコンの名前については、 jQuery Mobileのリファレンス を参照してください。
'arrow-l'
buttonTheme String テーマを指定します。
省略した場合は、既定のテーマを使用します。
テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。
使用可能なテーマの名前については、 jQuery Mobileのリファレンス を参照してください。
-
Boolean属性 dataAjax boolean 画面遷移時のAjax処理の有効・無効を指定します。「true」の場合、Ajax機能を利用して画面遷移を実行します。
「false」の場合、Ajax機能を利用せずに画面遷移を実行します。
未指定の場合は「false」と同様となります。
なお、jQuery Mobileのmobileinit内でAjax処理をoffに設定している場合は、本属性をtrueに設定してもAjax処理は行われません。
詳しくは jQuery Mobileのリファレンス を参照してください。
-
dataDirection String ページ遷移時のアニメーション方向を指定します。
未指定の場合、jQuery Mobileのデフォルトの方向になります。
また、dataAjaxが「true」以外の場合、本属性は無効となります。
-
dataPosition String ツールバーのポジションモードを指定します。
未指定の場合は「inline」を指定します。
その他、使用可能なポジションモードの名前については、 jQuery Mobileのリファレンス を参照してください。
-
escapeJs JavaScriptエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が JavaScriptエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の JavaScriptエスケープ処理は行われません。
未指定の場合は「現在実行中の プレゼンテーション・ページ に紐づくescapeJsの値」に則ってJavaScriptエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
escapeXml XMLエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が XMLエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の XMLエスケープ処理は行われません。未指定の場合は、「現在実行中の プレゼンテーション・ページ に紐づくescapeXmlの値」に則ってXMLエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
無害化 headerText String ヘッダに表示するテキストを指定します。 -
headerTheme String テーマを指定します。省略した場合は、既定のテーマを使用します。
テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。
使用可能なテーマの名前については、 jQuery Mobileのリファレンス を参照してください。
-
無害化 label String ボタンの文言を指定します。 'HOME'
必須
path String 遷移先のページのルーティングパスを指定します。
属性 path に対して次に表示させたいプログラムのルーティングパスを指定する ことで、ページ遷移をさせることができます。ここで指定するパスは、ルーティング設定のpath属性に設定された値です。
-
無害化 その他 String タグに指定する各属性値を指定します。
遷移先のURL引数として設定されます。
-

サンプル

マークアップ例

マークアップ例
マークアップ例。
<div data-role=“content”>の前に挿入します。
プレゼンテーションページ (HTML)
<div id="first_page" data-role="page">
  <imart type="spHeaderWithLink" headerTheme="b" path="menu/sitemap/sp" label="サイトマップ" headerText="サンプル" />
  <div data-role="content">
     <p>Hello IM-Mobile Framework!</p>
  </div>
  <div data-role="footer">
     <h3>Footer</h3>
  </div>
</div>