phonegap (4 つのデータ ロール ページを持つ 1 つの html ページ) を介してモバイル アプリを作成しています。ページの 1 つにリストビューが表示されます。
pagebeforeshow で、動的にリスト項目を ul に追加します。pageshow で、リストビューを更新します。
それはうまくいきます。ただし、最初の 1 ~ 2 秒間は、jquery モバイル スタイルのないリストが表示されます。その後、正しいスタイルに更新されます。
問題は何ですか?(注:スクリプトタグを頭に入れると機能しますが、他のイベントは機能しなくなります。これが何か関係があるかどうかはわかりません。)
ありがとう、クリストフ
$("#tips").on('pagebeforeshow', function(){
db.transaction(getDbTips, onDbError, onDbSuccess);
});
$("#tips").on('pageshow', function(){
$("#tipsLijst").listview('refresh');
});
function getDbTips(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS TIPS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, beschrijving)");
tx.executeSql("SELECT * from TIPS", [], onSelectTipsSuccess, onDbError);
}
function onSelectTipsSuccess(tx, results) {
$('.tip_item').remove();
var len = results.rows.length;
for(var i=0; i<len; i++) {
$("#tipsLijst").append("<li class='tip_item'><a href='#detailsTip' onclick='sessionStorage.TipId=" + results.rows.item(i).id + "'>" + results.rows.item(i).beschrijving + "</a></li>");
}
};
HTML:
<div data-role="page" id="tips">
<div data-role="header">
<h1>Kado-tips</h1>
<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" id="tipsLijst">
</ul>
</div> <!-- einde content -->