jQueryMobileでページ遷移の時のスライドをやめる

Read More

jQueryMobileを使っているとページ遷移の際に、勝手にアニメーションでスライドのエフェクトを付けてくれる。

このスライドエフェクト、スマホっぽさが増すのでそれはいいのだけど一つ大きな問題がある。


それは、
ページ遷移をする時に一瞬ページトップに戻ってから次のページを表示するというもの。


これが困る。


一瞬とは言え、画面がページトップに戻ると、ページがもう切り替わったように感じるのでついついここで画面にタッチしてしまう。


スライドエフェクト以外を選択しててもこの現象は同様に起こる。

data-transition="none"と指定してもこの現象が出てしまう。
というか"none"指定は本来正しいものではないんだけどね。



うーん、困ったね。
ページトップに戻るのを止めるにはどうしたらいいんだ…
スライド効果もいらないんだよ。


で、ググって調べたところ、最初にヒットしたのが
a要素にrel="external"を追加するというもの。


これをやってみたところ、確かにページトップへ戻る動きはなくなった。

だけど、全ページのa要素に一つ一つやってくのってちょっと難しくないか?


いやまあそれだけならいいんだけど、他にも決定的に使えない理由があった。


それはform要素。


form要素にrel属性なんてものはない。

そりゃーそうだ。
外部サイトへ飛ばすform要素なんて普通ないもの。


なのでformの時はスライド効果を抑制することができない。

ってことでrel属性の方法は却下。



次に調べたのがjQueryMobileのマニュアル。

最初からコレ見れば良かった…。


色々見ていくと初期値を設定するとかいうページにそれっぽいものがあった。

で試してみたらうまくいったのでメモしておく。


まず以下の内容でjsファイルを作成する。

■ファイル名:custom-scripting.js
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.ajaxLinksEnabled = false;
  $.mobile.ajaxFormsEnabled = false;
});



で、これをjavascriptを読み込むところで次の順序で読み込む。
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>



重要なのはcustom-scripting.jsをjquery.jsとjquery-mobile.jsの間で読み込む という点。

順序を変えると初期値設定が適用されない。



とりあえずこれで完全にtransitionの効果をなくすことができた。

完全に、と言ったのは『loading…』という表示もなくなるので。

リンクを踏んでもformでsubmitしても、ごく『普通』の画面の読み込み方となる。



あと、jsファイルの作る時の注意点として、
ajaxLinksEnabled と ajaxFormsEnabled の2つのオプションをfalseにするだけでは正しく動作しなかった。

ajaxEnabled をfalseにすることによって初めて期待する動作になったことを付け加えておく。



動作を確認したVersion
jquery-1.5.2.min.js
jquery.mobile-1.0rc1.js
iOS 4



★2011/11/10追記
<form data-ajax="false">
…
</form>

マニュアルによると上の書き方でもajaxでの画面遷移を止めることができるらしい。

formでsubmitする時に横にスライドはおかしいしね。






Comments(6)

1  ふみ  2012/03/13 (火) 01:57 ID:XXXXXXXXX
最近iPhone用のサイトを作っていてフォーム用のjQueryを使ってみたらいろいろと勝手に設定ができてしまっていたのですが、こちらの記事を参考にさせていただき解決できました!
jsやCSSなどもあまりわからないレベルなので困って試行錯誤していたためとても助かりました!ありがとうございました!

2  シラサヤ  2012/03/13 (火) 18:56 ID:XXXXXXXXX
こんな記事でも役に立ったと言われればうれしいね

3  グルヌイユ  2013/01/15 (火) 19:59 ID:XXXXXXXXX
jQuery Mobile 入門者です。この記事のおかげで助かりました。

jQuery Mobile をつかった web service で form で submit した先から php の header (location, $url) で飛ばすときに、$url が自サイト内だと問題ないのに外のサイトだと Page Loading Error になる理由がわからず、4時間試行錯誤した末にここにたどり着きました。

どうもありがとうございました。

4  シラサヤ  2013/01/16 (水) 11:16 ID:XXXXXXXXX
コメくれたお陰で久しぶりにjQueryMobile触ってみようって気になったよ。ありがとう。

5  ゆつき  2013/10/25 (金) 08:37 ID:2tvtBzL35
私も同じ現象になっていて困っています。

私の場合、まだ書きかけ時に気付いたのですが、ヘッダとフッタを固定すると起きるみたいです。
とりあえず応急措置としてヘッダとフッタの固定を解除したところ、その現象は起きませんでした。

ただ、PhoneGapを使ってアプリケーション化を使用と思ってるので固定ヘッダにできないのは痛いです(^^;)

6  シラサヤ  2013/10/25 (金) 16:44 ID:QfZy25815
PhoneGap
アドビのフレームワーク…か。
これは知らなかったものだな。
情報ありがとう。



それにしてもjQueryMobileってまだまだ需要があるんだね。

以前にもどこかの記事で書いたけど個人的にはjQueryMobile使うのってデメリットの方が大きい気がするんだよねえ。

以前いくつかの機種で動作テストしたときページスクロールがひっかかるようになったことがあって。
それ以来jQueryMobileを使うことがなくなっちゃった。

それにあれこれCSSを変更しなきゃならんような場合はjQueryMobileを使うより自分で一から作ったものの方が…とか思っちゃったり。


最近のjQueryMobileをよく知らないのだけど今あれを使うメリットってなんだろう。