ヘッダの構造

ヘッダはページ最上部に表示されるツールバーで、通常はページのタイトルと、オプションで左端や右端にナビゲーション用のボタンを持っています。

ページタイトルは通常 h1 要素になりますが、セマンティック構造にあわせて h1～h6 のいずれのレベルにも設定できます。たとえば、ドキュメントが複数のページを持っている場合は、h1要素は全体のホームとなるページにだけ用い、それ以外はh2でサブページであることを表現することも出来ます。全てのレベルのヘッダは、一貫性を保つようデフォルトで同じスタイルがあてられます。

<div data-role="header"> 
        <h1>Page Title</h1> 
</div>

デフォルトヘッダの機能

ヘッダはデフォルトで “a” の色見本(用意されたテーマで背景が黒いもの)が適用されます。設定は、容易に変更できます。( ツールバーのテーマ 参照 )

ちなみに、“back“ボタンは見えるでしょうか？フレームワークは自動的に「戻る」ボタンをページ上に作成します。もしボタンが無ければ、ダイレクトにこのページを表示して、履歴が存在していないためです。この挙動を止めるには、ヘッダの左側に独自のボタンを追加する(後述)か、ヘッダに data-backbtn=“false” という属性を記述します。

ボタンの追加

通常のヘッダ構造では、タイトル部分の両脇にボタン用のスロットが用意されます。ボタンは共にアンカー要素であることが一般的ですが ボタン にすることも出来ます。ボタンはスペースを節約するために インラインボタン として作成されるので、幅はテキストの長さにアイコンの大きさを加えたものになります。

独自「戻る」ボタンの作成

アンカーに data-rel=“back” を指定すれば、記述されている href 属性は無視され、「戻る」ボタンの挙動を行うようになります。これは特に “home” などのボタンを作る際や、ダイアログボックスの「閉じる」ボタンを作る際などに有効です。この属性をHTML作成時から記述してしまう場合は 戻したい場所のURLをhref属性に記述しておくことを忘れないようにしてください。さもなければ、Cグレードの古いブラウザではリンクが機能しなくなってしまいます) また、ページ遷移時に実際には履歴を戻るわけではなく切り替え効果だけは戻った風に逆方向にしたい場合は、 data-direction=“reverse” を指定するよう覚えておいてください。

デフォルトのボタン位置

ヘッダプラグインはヘッダの直下にある最初のリンクを探して、左端に配置します。そして次に見つかったリンクを右端に寄せます。次の例ではこのルールに従って “Cancel” ボタンが左端に、“Save” ボタンが右端に置かれます。

<div data-role="header" data-position="inline">
        <a href="index.html" data-icon="delete">Cancel</a>
        <h1>Edit Contact</h1>
        <a href="index.html" data-icon="check">Save</a>
</div>

ボタンは自動的にヘッダの色見本に従います。ヘッダが “a” の設定であれば、ボタンの色もまた “a” に揃えられます。ボタンを目立たせるのは簡単です。次のように data-theme 属性を指定して、例えば “Save” ボタンを “b” の色見本にしてやります。

<div data-role="header" data-position="inline">
        <a href="index.html" data-icon="delete">Cancel</a>
        <h1>Edit Contact</h1>
        <a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>

クラスを使った位置設定

ボタンの位置は、アンカー要素にクラスを追加することでも制御可能です。出現順で制御するのと異なり、特に右側にだけボタンを付けたい場合には便利です。位置を指定するには ui-btn-left もしくは ui-btn-right クラスを設定してください。

次の例では、右側にだけ data-backbtn=“false” を指定した「戻る」ではないボタンを配置しています。ヘッダにおいて最初のボタンは戻るボタンとして左側に置かれるのが初期状態ですが、更に ui-btn-right クラスを指定することで挙動も位置も変えています。

<div data-role="header" data-position="inline" data-backbtn="false">
        <h1>Page Title</h1>
        <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

戻るボタンのテキストを変更する

「戻る」ボタンのテキストを変更したい場合、ページ要素に data-back-btn-text=“previous” のように指定するか、あるいはページプラグインのオプションとして $.mobile.page.prototype.options.backBtnText = “previous”; のようにスクリプトで直接プログラミングするか、いずれかの方法で可能です。プログラミングするのであれば、この記述は mobileinit イベントで行うようにしてください。

$.mobile.page.prototype.options.backBtnText = "previous";

戻るボタンのデフォルトスタイル

戻るボタンのテーマを設定したい場合、次のような指定が可能です。

$.mobile.page.prototype.options.backBtnTheme = "a";

プログラミングするのであれば、この記述は mobileinit イベントで行うようにしてください。

ヘッダを独自拡張する

ヘッダに独自の機能をつけたければ、ヘッダを示す div 内部に自由にマークアップしてください。スタイルなどはデフォルトの動作を保ったまま、自由に機能を追加することが出来ます。

また、data-roleにheaderの指定を一切行わずにカスタムバーを作ることも可能です。たとえば、適当なコンテナをつくり、標準的なバーの体裁をとるため ui-bar クラスを指定します。そして ui-bar-b クラスをスウォッチとして設定します(この“b“は、他のスウォッチに変更できます)。

<div class="ui-bar ui-bar-b">
        <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</div>

こうして作られるのは、次のようなバーです。

簡単なスタイルを追加することで、たとえば次のようなメッセージバーも簡単に作ることができます。