Header and Footer

ヘッダとフッタウィジェットはページにデフォルトバーを設定するために使用します。ほとんどのオプションがページ内に定義されているので、ヘッダとフッタはページウィジェッドと密接に結びついています。ヘッダとフッタのウィジェットスタイルは、ページのHTMLマークアップで設定します。

注意
デフォルトボタンのスタイル(`data-role="button"`)はヘッダでサポートされていません。ボタンに`<a>`タグをを追加する必要があります。

アプリケーションにヘッダウィジェットを追加するには、次のコードを使用します。

<div id="foo" data-role="header" data-position="fixed">
   <h1>NBeat UI</h1>
   <a>Button 1</a>
</div>

$("#foo").barlayout('show');

次のリストでヘッダスタイルを説明します。

1個のボタンがついたタイトル

  <div data-role="header" data-position="fixed">
     <h1>NBeat UI</h1>
     <a>Button</a>
  </div>

  <table border="1" id="controls">

2個のボタンがついたタイトル

  <div data-role="header" data-position="fixed">
     <h1>NBeat UI</h1>
     <a>Button 1</a>
     <a>Button 2</a>
  </div>

1個のボタンとアイコンがついたタイトル

  <div data-role="header" data-position="fixed">
     <img src="icon-tizen.png" />
     <h1>Icon Title</h1>
     <a>text1</a>
  </div>

タイトルとサブテキスト(複数行)

  <div data-role="header" data-position="fixed">
     <h1>Title Text multiline</h1>
     <span class="ui-title-text-sub">tizen@samsung.com</span>
  </div>

タイトルとサブテキストとアイコン(複数行)

  <div data-role="header" data-position="fixed">
     <img src="icon-tizen.png"/>
     <h1>Title demo</h1>
     <span class="ui-title-text-sub">Title image multiline 2 Buttons</span>
     <a data-icon="naviframe-more"></a>
     <a data-icon="naviframe-edit"></a>
  </div>

jQueryMobileのイベントについてのドキュメントに説明されている方法でイベントのコールバックをヘッダとフッタに設定することができます。