jQuery Mobile 1.4 移行後 ダイアログが二重に･･･

jQuery Mobile 1.3 でアプリケーションを作っていたのですが、1.4にアップグレードすれば動作が速くなると聞きアップグレードを試みました。結果は満足な速度アップ。

しかし、お作法が変わった関係でコードにいくつか手を加えなくてはならないのがネック。修正が片手落ちでダイアログが二重になってしまった場合の対処方です。そんな人、私くらいかもしれませんが･･･

jQuery Mobile 1.3 のダイアログ

jQuery Mobile 1.3 ではダイアログは <DIV>タグに data-role=”page” 属性を設定した普通のページを用意し、ダイアログを開くための <A>タグに data-rel=”dialog” 属性を設定するやり方でした。

 jQuery Mobile 1.4 のダイアログ

jQuery Mobile 1.4 ではダイアログは <DIV> タグの data-role=”page” に加えて data-dialog=”true” 属性も設定します。そして、ダイアログを開くための <A>タグには data-rel=”dialog” ではなく data-transition=”pop” を指定する方法に変わりました。

 <DIV>だけ対応したらダイアログが二重に･･･

私の場合、<DIV>だけ対応し、<A>タグの方を対応し忘れてしまいました。その結果、ダイアログが二重に出るという残念な事態･･･。変更内容はしっかり確認しましょうと反省しました。

しかし、jQuery Mobile お作法の変更しすぎです･･･

対応後

<DIV>に加えて<A>タグも対応したところ、ダイアログが正しく表示される様になりました。

jQuery Mobile 1.3  から 1.4 に変更するなら以下のサイト参考になります。

jQuery Mobile 1.4の変更点と既存ページ対応のポイント（前編） （1/3）：CodeZine
変更内容が簡潔の数多くまとめられています。

これで一安心。