« 03.07 GPS情報をHTML5で | ココ | 03.12 M9.0の衝撃 »
2011年3月10日
jQuery Mobileのlistviewに弄ばれる
jQuery Mobileを使って、先般のLike Counterは作ったんですが、お手軽にそれなりのUIが作れるので便利です。ライブラリの使い方も、jQuery Mobile の紹介(ref. IBM)などもあったりと、資料はそこそこ揃っていて、単純なサイト構築なら、全然問題なく作れちゃうところがいい。
しかし、ちょっと踏み込んだことをしようとすると、途端に難しくなるのもjQuery Mobile…。Like Counterは「いいね！」をしてくれた友達をその数が多い順番にli要素で並べてくわけやけど、あまりに友達の数が多いとli要素の数が大変な数になってしまうことも考えられるわけで、動的に表示できるようにしないとレンダリングにも時間がかかってしまうだろうということで、20人ずつで区切って表示するようにしようと思ったわけですがそれがまた面倒なこと面倒なこと。
jQuery Mobile で listview へ要素を動的追加(ref. ただのメモ)にあったように、下記のようなコードにしてみたりもしたけど、動的にliを追加することはできず。本当はコーナーが丸まってないリストにしたいのに、丸まってない状態ではスタイルがもっとおかしなことになる。
var listviewItems = $('ul'); // listview を実行済みの list
var nextItems = $('<ul></ul>');
nextItems.append('<li>test1</li>');
nextItems.append('<li>test2</li>');
listviewItems.find('li:last').removeClass("ui-corner-bottom");
nextItems.data('inset', 'true').listview();
nextItems.find('li:first').removeClass("ui-corner-top");
nextItems.find('li').appendTo(listviewItems);
犬グッズは、ちゃんと表示されてるのに、なんでー‼ と悩み続ける。
結局、ul要素を作った中にまずダミーのliを入れておいて(ヘッダー部分に相当)、liを20個詰め込み、詰め込んだliを挿入したいul要素の最後尾に追加した後にlistview('refresh')する方法に行き着いた。なんでか、単純にlistview('refresh')をするとエラーが起こって止まるとか謎な現象に長らく引っかかったりと大変やった。
li_parent = $('<ul><li>dummy</li></ul>');
$.each(items.splice(0, 20), function(idx, item) {
txt = '<li class="like_person">アイテムの中身</li>';
li_txt = $(txt);
txt = '<ul>';
$.each(item.posts, function(idx_post, post) {
txt = txt+'<li data-icon="grid"><a data-rel="back">'+post+'</a></li>';
});
txt = txt+'</ul>';
li_txt.append($(txt)).appendTo(li_parent);
});
li_parent.find('li:first').remove();
li_parent.find('.like_person').appendTo(pos_element); /* pos_elementが最終的に表示するul要素 */
pos_element.listview('refresh');
あと、Ajaxで読み込む方式の場合はjavascriptが最初のページで全部用意しておかないと、後から読み込むページに書いてても無視されるとか。ちょっと手を入れようと思ったら結構邪魔くさいね。
jQuery Mobile リンク構築上の留意事項(ref. billboardtop100 blog)
By ただ at 21:39 カテゴリー ; PinMarch Samples , プログラミングとか
« 03.07 GPS情報をHTML5で |
03月の記事
| 03.12 M9.0の衝撃 »
トラックバック
このエントリーのトラックバックURL:
http://pinmarch.sakura.ne.jp/mt/mt-tb.cgi/1723
