1

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 -->
4

1 に答える 1