jQuery Mobile 戻るボタンの一括設定と独自の戻るボタン

jQuery Mobile ではデータ属性を指定することにより戻るボタンを設置することができますが、サイトのすべてのページに戻るボタンを設置したい場合はJavaScriptで一括設定すると便利です。また独自の戻るボタンも設置できますのでその方法も解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. JavaScriptにより戻るボタンを一括設定する
  2. 特定のページだけ戻るボタンを設置しない
  3. 独自の戻るボタンを設置する

【記事執筆時の環境】
jQuery Mobile 1.4.5

JavaScriptにより戻るボタンを一括設定する

mobileinitイベントリスナーとして JavaScriptコードをトップページに記述すると、すべての下層ページのヘッダーに戻るボタンを設置することができます。

head要素内の jQuery Mobile を読み込む前に、$.mobileオブジェクトのプロパティを以下のように設定します。ボタンに表示するテキストも "戻る" に変更しています。

今回は以下の図のようにサブページとフォームに、戻るボタンが表示されるDEMOページを作成してみました。

DEMOページの構成図

特定のページだけ戻るボタンを設置しない

戻るボタンではブラウザの履歴をたどって前のページに戻る動作になります。
フォームなどでは入力したデータの処理をするため、戻るボタンをクリックしてほしくない場合があります。

そこで一括設定で戻るボタンを設置するようにした場合でも、特定のページには戻るボタンが表示されないようにしてみます。

ヘッダー要素に「data-add-back-btn="false"」を指定することで、戻るボタンが表示されなくなります。

先ほどのDEMOページで、フォームにだけ戻るボタンを表示しないようにしてみました。

独自の戻るボタンを設置する

これまでは戻るボタンはすべてヘッダーに設置してきましたが、独自の戻るボタンを任意の場所に設置することもできます。

data-rel="back"」をリンクボタンに指定することで、戻るボタンにすることができます。

以下の図のように、フォームに独自の戻るボタンを設置してみます。

独自の戻るボタンを設置したフォーム

ユーザーにとって戻るボタンは便利であり必要な機能と思いますが、サイト制作者の意図しないところで戻るボタンをクリックされるとページ間のデータ整合性がとれなくなることもありますので、ユーザー操作を十分に考慮したページ設計にしましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ