リストの動的変更
リスト要素を動的に追加、つまりプログラムでコントロールするなら
listview(“refresh”)
を使ってリストを更新すること
理由は、通常の要素追加だけだと
jQueryMobileのスタイルが追加されないため
なので、jQueryMobileを適用するには
通常の要素追加のあとに
listview(“refresh”)
を仕掛けることになる
これほ、マッシュアップで使うことになる
あとは、API関連とか
<div data-role="page" id="listview-add"> <div data-role="container"> <h1>要素を動的に追加</h1> <form> <ol data-role="listview" data-inset="true" id=addlist""> <li>要素1</li> <li>要素2</li> <li>要素3</li> </ol> </form> <button id="addbtn">要素を追加</button> </div> </div>
//リストの要素を動的に追加
$(document).on("pageinit","#listview-add",function(e){
$(this).on("click","#addbtn",function(e){
var target b= $("#addlist");
target.append("<li>追加要素</li>");
target.listview("refresh");
});
});
これで、要素追加のボタンである
#addbtnをタップすると
append()により
li要素の一番下へ要素が追加される
追加されるのは
<li>追加要素</li>
になる
また、通常のHTMLならこれでokだけど
jQueryMobileではデザインを適用するには
今回のように
listviewに対して refreshをかける
refreshし忘れると、ただのHTMLになってしまうので注意