jQuery Mobile 1.3.1にバージョンアップしてみた。

• facebook

オフィス狛　技術部です。

旧バージョンのjQuery Mobileで作成したサイトをリニューアルする事になり、
ついでに、jQuery Mobile のバージョンアップしてみました。

正しく動作するまで苦労したので、対応内容をメモしておきます。

まず分かり易く動作しなかったのが、以下の二つ。

1. ページ遷移のアニメショーンが効かない。
2. 遷移後の画面で「戻る」ボタンが表示されない。

それぞれの対応内容を記載します。

１．ページ遷移のアニメショーンが効かない。

旧バージョンでは、以下のように記載していました。

$(document).bind("mobileinit", function(){
    $.mobile.defaultTransition = "slide";
});

新しいバージョンでは、defaultTransitionは無視されてしまうようです。
（ defaultPageTransition と defaultDialogTransition が追加されている）
実害が無いのであればこのままでもいいのですが、
折角jQuery Mobileを利用しているのに、
アニメーションが出来ないのは意味が無いので、以下のように修正しました。

$(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = "slide";
});

２．遷移後の画面で「戻る」ボタンが表示されない。

旧バージョンでは勝手に作成された「戻る」ボタンが、新バージョンになるとデフォルトでは作成されないようです。
以下のように明示的に指定するように修正しました。

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.addBackBtn = true;
});

とりあえず、正しく動くようになりました。
また何かあれば、記載しようと思います。

※対応は下記の記事を参考にさせて頂きました。

jQuery Mobile Beta1へのアップデートについてまとめたメモ


jQuery Mobile