スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery Mobileの初期化イベントが微妙

jQuery Mobileではpage="ID"の要素がページとして認識されます。

ページなのでjQuery Mobile APIが使えます。

jQuery Mobile APIとは初期化メソッドとかchangePageとかのアレです。

この初期化イベント、使ってみてわかったんですが結構厄介でした。

・たとえば一番最初に読み込まれるページ(index.htmlの一番上のpage="ID"のセクション)だとそもそも初期化イベントが呼ばれない。
起点になるページが#topだとすると、$("top").on("showpage",f(){})や$("top").on("createpage",f(){})が発火しない(1.1で確認)。
※"showpage"が評価されるのは再度#topを表示した時から。

・"pagebeforeshow"イベントでAJAX通信して準備して、"pageshow"で表示イベントを設定したとします。
$.mobile.changePage(#hoge)すると"pageshow"は評価されるけど"pagebeforeshow"は評価されないので、動的コンテンツが反映されない、もしくは最悪の場合前回表示された結果が再度表示される。

・"pageshow"とか一連のページ系初期化処理、dialogの表示非表示でも評価される。
 ダイアログを閉じるとそのページの"pageshow"が再度実行されてアッーとなる。

とまあ、ちょっといじっただけでもこれだけのトラップが待ってます。
jQuery Mobileだとテンプレート用意しなくていいのは魅力だけど、ちょっと盛りすぎてて使いどころを考えないと結構苦労する。
あとpage()の挙動が微妙。

ちなみにjQuery Mobile + Phonegapだとクリックの反応が鈍くなります。iOSだと大丈夫なのにな。
しかもjQuery Mobileの特徴の一つであるtransitionのほとんどがアンドロイドブラウザで動かない。
よく聞くjQuery MObile+Phonegapでアプリ作ろう!っていうのはちょっとちゃんと考えないと後々大変なことになるよ(自戒)

スポンサーサイト

jQuery Mobileでlistviewに動的にエレメントを追加する

jQuery Mobileってあるじゃないですか。
あれってHTMLのdata属性を見て、勝手に要素に色々属性つけて見栄え良くするんですけど、$(jQuery).append()とかで属性を付与すると、付与した属性には当然そういった処理はやってくれないんで、追加した属性だけみすぼらしくなります。

たとえば

<section data-role="page" data-iscroll="enable" id="list">
<div class="content" data-role="content" data-iscroll="scroller" id="scroll_list">
<ul data-role="listview">
</ul>
</div>
</section>


みたいのがあったとして、

こいつに

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");


とかってやっても、当然

<li>

が足されるだけで、自動的に

<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c">


になってくれるわけではありません。

で、listviewの場合は$listに対して.listview()を呼び出せば良いわけなんですが、

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");
$list.listview();



これが何故か上手くいかない。

何でかと思ってjQueryMobileのドキュメントを読んでたら

スクリプトからリストにアイテムを追加した後は refresh() メソッドを呼んで明示的にスタイルを更新してやる必要があります。



orz

これってもしかして1.0からなのかしら?

$page = $("#list");
$list = $page.find(".content ul");
$list.append("<li>あああああ</li>");
$list.listview("refresh");


これで解決!

このカテゴリーに該当する記事はありません。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。