jQuery Mobile の Ajax を使用したページやフォーム遷移を無効にする

2012/04/07 追記 このエントリには今でもアクセスがあるのですが、2011 年のものであるのと、以下のようなエントリを書いている方もいますので、Ajax を無効にしない方向で頑張れないか、考え直してみた方が良いと思います。

そろそろ jQuery Mobile で ajax を無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記 http://d.hatena.ne.jp/pikotea/20120405/1333631161

最近、jQuery Mobile を触っています。

JavaScript や CSS を殆ど書く事なく、HTML を記述するだけで割と綺麗な(?)スマートフォン向けのウェブサイトを作成する事ができ、とても面白いです。まだ Alpha 2 で少々不安定な所もありますが、1 月中に 1.0 がリリースされる予定なので、楽しみですね。

jQuery Mobile | jQuery Mobile http://jquerymobile.com/

jQuery Mobile は、デフォルトではページ遷移やフォーム遷移に Ajax を使用しており、ページ全体を切り替える事無く、一部分だけを書き換えて遷移をしてくれます。しかし、この機能を使用していると、いつの間にかアドレスが「././././././hoge.html」などと、おかしな事になる場合があるので無効にするようにします。ページローディングのクルクルを表示してくれたりトランジションしながら切り替えてくれたりと、かっこよく遷移してくれるので、いずれはちゃんと使って行きたい機能です。

jQuery Mobile には設定可能なオプションがあって、jQuery Mobile が読み込まれる前にオーバーライドしたい設定を JavaScript な設定ファイルに書いておく事で初期設定を変更できます。

jQuery Mobile: Demos and Documentation http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html

設定可能なオプションは、ページ中央辺りの「Configurable options」にあります。今回は、以下のオプションを設定ファイルに書きます。

ajaxLinksEnabled (boolean, default: true)
- Ajax を使用したページ遷移を行う(デフォルトは有効)
ajaxFormsEnabled (boolean, default: true)
- Ajax を使用したフォーム遷移を行う(デフォルトは有効)

config.js:

$(document).bind("mobileinit", function () {
  $.mobile.ajaxLinksEnabled = false // Ajax を使用したページ遷移を無効にする
  $.mobile.ajaxFormsEnabled = false // Ajax を使用したフォーム遷移を無効にする
})

HTML 側では、設定ファイル(この場合 config.js)を以下の順番で読み込ませます。 jQuery -> config.js -> jQuery Mobile 必ず jQuery Mobile を読み込む前に設定ファイルを読み込ませるようにします。

hoge.html:

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/jquery.mobile-1.0a2.min.js"></script>

これでページ遷移、フォーム遷移が無効になります。

また、上記のような設定をしなくても、一部だけページ遷移を無効にしたいのであれば以下のように記述する事で無効にできます。

<a rel="external" href="hoge.html">Hoge</a>