ページタイトル

Ajaxナビゲーションにおけるページタイトル

jQuery Mobileを用いたサイトで最初のページを開き、次にリンクをたどるかフォームをサブミットするなどしてページ遷移すると、そのページはAjaxにより取得されて元ページに挿入されます。ページ内部は、このような機構で切り替えられますが、ヘッド要素内のページタイトルについては最初の状態から変わらないことになります。

この問題を解決するため、jQuery MobileはAjaxにより取得してきたページをパースして title 要素を抽出し、自動的にそれを現在のページの title と入れ替えるよう処理します。

複数ページ・テンプレートにおけるタイトル

複数ページを持つファイルの場合も近い処理を行いますが、こちらはHTML上、ひとつの title 要素を共有している形になっています。そのため、各ページコンテナ要素は data-title という属性を持つことができ、そこに指定されたものがページのタイトルになる仕様となっています。HTMLの title 要素は、現在表示中のページにある data-title と自動的に同期するようになっています。

<div data-role="page" id="foo" data-title="Page Foo">
...
</div><!-- /page -->