ネストリストビュー

1.4からネストされたリストビューが使えなくなったようなのですが、プラグインがありました。

jquery-mobile-nestedlists

ネストされたリストを表示した時にカスタマイズが必要な場合は始めから作ったほうが早そうと思いましたらすでにやってらっしゃる方がいらっしゃいました。

jQuery Mobile の階層化リストビューが非推奨！？そんなときは

取り急ぎメモ書きまで

ページ間でGETパラメータを渡す

通常のajaxでサーバへページをリクエストして遷移する場合はGETパラメータを扱うのはサーバなので問題はありませんが、Multi Pageを１つのファイルに入れておき遷移する場合は、移動先のページでGETパラメータを取得する必要がある場合があります。

jQuery Mobileが取得する方法を用意しているかと思っていましたが残念ながらないようです。自前も含めて色々試した結果プラグインを使うのが一番楽でした。

jquery.mobile.paramsHandler

特に使用上の注意はなく1.4.4で問題なく動作しました。使用方法はgithubのページに書いてある通りです。

(jquery Mobileを読み込んだ後でないといけないので、このライブラリをイベントを描くのはさらにその後です)

[不具合対応] ajax-linkで移動した後のtabsの動作がおかしい

data-role="tabs"でタブを使用しているページに直接移動した際にはきちんと１つだけのタブがアクティブですが、ajaxリンクで移動してくると全てのタブが表示されてしまう不具合がありました。

仕様だとするとjQuery Mobileのウィジェットとして存在する意味はないのでプログラムのミスかと思いましたがどうしても解決できませんでしたので、あらかじめアクティブにしたいタブ以外の表示を非表示にすることで回避しました。

.tabs({active: 0}) などを使っても駄目でした。

また以下のバグ報告にあるように機能的にそもそも動かない問題もあるようで、回避策にもある_createWidget:をいれる方法を使うとこの不具合は解消されました。


https://github.com/jquery/jquery-mobile/issues/7169

上記不具合は1.5で解消されるようです。

navbar 6個以上でも１列に表示

navbarはボタンが６個以上になると１列２個ごとの複数列になります。ただでさえ狭いスマホの画面で３列も領域をとられると厳しいので１列で６個以上になるようにソースを変更します。

http://stackoverflow.com/questions/6161377/more-than-5-items-per-line-in-jquery-mobile-navbar


スレッドで記載されているオリジナルのソースをモディフィケーションする方法を使用すると６、７個でも１列に表示できますが1.4では若干修正するcssが異なりました。

変更前

変更後

li.ui-block-f,
li.ui-block-g {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  list-style: none;
}

.ui-grid-e,
.ui-grid-f {
  overflow: hidden;
}

.ui-block-f,
.ui-block-g {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a,
.ui-grid-e .ui-block-b,
.ui-grid-e .ui-block-c,
.ui-grid-e .ui-block-d,
.ui-grid-e .ui-block-e,
.ui-grid-e .ui-block-f { width: 16.65%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14/14/14 */
.ui-grid-f .ui-block-a,
.ui-grid-f .ui-block-b,
.ui-grid-f .ui-block-c,
.ui-grid-f .ui-block-d,
.ui-grid-f .ui-block-e,
.ui-grid-f .ui-block-f,
.ui-grid-f .ui-block-g { width: 14.2857%; }
.ui-grid-f .ui-block-a { clear: left; }

[不具合対応]iOS hoverの位置がずれる

iOS7.1.2で確認　jQuery Mobileに限ったことではないようですがタップした位置とは違う位置のボタンがhoverとしてハイライトされてしまいます。
jQuery Mobileのlistviewではhoverがついたボタンがたくさんならんでいるためこの問題が分かりやすく出てしまいますが、通常のホームページの場合はあまり問題にならないのではないかと思います。

対応方法はバグ(? 仕様の可能性有り)が修正されるのを待つのが良さそうです。

以下の動画はjQuery Mobileでは擬似的にhoverを実現しているようなので、問題を分かりやすくするためにjsは動作しないようにしてあります。

調査1
aやliにtouchstartをバインドすると問題がおきる。バインドされた関数内では何も実行しなくても問題が起きる。JQMはtouchstartをバインドしているので問題が起きているようです。「touchstartをバインドするとsafariはhoverを有効にする」という記述が他の方のブログににもありました。

調査２
touchstartをバインドするとsafariはclientYとpageYを勘違いしてhover処理を行っているようです。

jQuery,jQuery Mobileは関係ないようですがあまり問題にあがってない所をみるとなんらかの環境依存かもしれません。

[不具合対応] iosでclickイベントが発生しない

jQuery Mobileとは直接関係ありませんが、fieldsetの中にいれたlegendにclickイベントを割り当てた所、ios以外は動作するにも関わらずiosだけはイベントが発生しなかった問題が行りましたので対応方法を調べました。

legendは駄目ですがlabelは問題ありませんでした。ios7.1.2で問題が起こっていました。

対応方法

onclick="" をつける

<legend onclick="">

パフォーマンス改善

経験則としてわかったことを記載しておきます。

全体として 

• vlickを使用する
• アニメーションはできるだけ使用しない
• Panel, Popupなどの共通部品はdiv(data-role="page")の外に移動する

ポップアップを早く表示する

• ポップアップのベースとなるdivにui-overlay-shadowをつけない。(ipad2でも体感できる差が出ました)

 フォームの改善

•  selectの選択肢が多くなると拡張する際の時間が悪化するようので少なくするかテキストインプットもしくは専用の選択ダイアログを作る。(拡張時に走査する対象がoptionの分だけ増えるから？)

パフォーマンス改善の参考になるページ

•  jQuery Mobile Optimizing Peformance
• jQuery Mobileの開発リードの方のスライドです。