このページの本文へ

jQuery Mobileのマークアップの基本とCSSの変更

2011年06月06日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

「Backボタン」のカスタマイズ

 jQuery Mobileではページ遷移したときに、ヘッダーの左上に自動的に「Backボタン」が追加されます。Backボタンは、ページ遷移時と同じアニメーションエフェクトで前のページへ戻る機能です。

04.png
jQuery Mobileにより追加されたBackボタン

 便利な機能ですが、サイトによっては英語のUIがなじまない場合もあるでしょう。Backボタンのラベルは、ページ要素に対してカスタムデータ属性「data-back-btn-text」を追加することで、任意の文字列に変更できます。次のように指定すると、Backボタンが「戻る」に変わります。

サンプル5[HTML]


<div data-role="page" id="about" data-theme="b" data-back-btn-text="戻る">


05.png
jQuery Mobileにより追加されたBackボタン

 手動でリンクを張りたい場合など、戻るボタンをあえて非表示にしたいときは、ヘッダー要素に対してカスタムデータ属性「data-backbtn="false"」を追加します。

サンプル5[HTML]


<div data-role="header" data-backbtn="false">


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く