jQMでアクセス中のページがトップページかどうか判別する

現在アクセスしているURLがアプリのトップページか否かを判断するには、どうすればいいでしょうか?

jQuery Mobile では id 属性を使ってページを識別するため、簡単に判断できます。

やりたいこと

今アクセスしているURLが、アプリのトップページかどうか判別する関数を作る。

  • トップページなら true
  • それ以外なら false

コード

トップページの id 属性が「top」という想定で進めます。

<div data-role="page" id="top" data-title="top page">
  <div data-role="header">

  </div>



  <div data-role="content">

  </div>


</div>

jQuery Mobile はページにアクセス時、画面を描画する前にページの構造を取得します。

つまり、今アクセスしているページの id 属性を取得できるので、これが top かそうでないかを判別すればOKです。

/**
 * アクセスしたページがトップページかどうか判別する
 *
 * @return {boolean} トップページなら true
 */
function isTop() {
    return $(":jqmData(role='page')").attr("id") === "top";
}

jQuery Mobile では data-* 属性を取得する時にはカスタムセレクタの jqmData() を使うのが作法なので、このような書き方になります。(下記の参考リンク内の「$.fn.jqmData()」参照)

参考

jQuery Mobile Docs - Methods