タイトルを固定する

マルチページでページ遷移を作った場合などに、jquery mobileが自動的にheaderのテキストを読み取ってタイトルを書き換えるのが困る場合があります。

対応方法としては以下の２つがありそうです

1.page divにdata-titleを付与する

<div data-role="page" id="page1" data-title="タイトル"> 

のようにdata-titleにタイトルにしたい項目をいれます。

 2. jquery mobileのソースをカスタマイズ

 全てのページにdata-titleを付与するのが面倒な場合は、jquery mobileのソースコードの以下の部分をコメントアウトします。

//set page title
document.title = pageTitle;

処理わずかでも向上させたい方はpageTitleに新しいタイトルを取得する部分もコメントしておくとよいかもしれません。

ネストリストビュー

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の開発リードの方のスライドです。

Buttonのdisable,enable

1.4から(?)div要素のclassにui-btnなどを加える事で簡単にボタンにすることができるようになりました。ボタンの無効化、有効化はbuttonウィジェットのAPIを使ってもできますが、以下のようにclassを操作するだけでも簡単に行えます。カスタムウィジェットなどを作っている時などは他のウィジェットのAPIをあまり呼びたくないので便利です。

無効化

$('#hoge_btn').addClass( "ui-state-disabled" );

有効化

$('#hoeg_btn').removeClass("ui-state-disabled");

jQuery Mobile 1.4対応のプラグイン

jQuery Mobile 1.4対応のプラグインをまとめていきたいと思います。jQuery Mobile専用のプラグインのみ扱いたいと思います。

DateBox

 







1.4からjQuery UIのDateboxもウィジェットとして使えるようになりましたが、こちらの方が個人的には使い勝手が良いです。日付入力のテキストボックスをクリックしても、キーボードが入力モードにならないため、スマホなどでは素早く日付選択ができます。
 

jQM-dynamic-popup

 ポップアップを動的に追加しようとすると自分でDOMにポップを表示するDIVなどを追加する手間がかかりますが、このプラグインを使用すると以下のように１行だけでポップアップが表示できます。

$.dynamic_popup('<div><h1>動的にポップアップ追加！</h1></div>');

Editable Listview

リストへ項目の追加と削除を行う事ができるプラグインです。

Listviewアイコンサイズを大きくする

ListViewウィジェットでアイコンを表示する事ができますが、16pxがディフォルトでかなり小さく感じますので24pxとして表示されるように変更してみました。

標準16px

変更後の24px

.ui-listview .ui-li-icon {
  position: absolute !important;
  max-height: 24px !important;
  max-width: 24px !important;
  left: 10px !important;
  top: 10px !important;
}

vclickイベントの取り扱い方

iphone,ipadではclickイベントは実際にボタンがタッチされた0.3秒後ぐらいに発火されるようです。そのため、動作がもっさりしているように感じてしまいます。

0.3秒待たずにボタンのクリックを受け取る方法として、jQuery Mobileではvclickイベントを使用する事ができますが実際に使用してみていくつか注意点がありました。

ヘルプにも書かれていることですが、vclickイベントが発火されてから0.3秒後に同じ位置にclickイベントが打たれます。そのため、vclickイベントでPopupなどをボタンの上に出すと、ポップアップでボタンのクリックした部分と同じ位置にあるボタンなどがクリックされます。

逆に言うと同じ位置にPopupが出たり、スクロールしたりしなければ今の所使っていても不都合がないように感じます。

ポップアップがボタンと同じ場所に表示される場合

ポップアップ内のボタンのイベントで弾くようにいたしました。