スポンサーサイト

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

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。