1

サーバーからいくつかのデータを取得しており、スタイルを更新しようとしている ul リストを作成しています。

listview('refresh',true)うまくいかないようです。jqm 1.4ベータ版を使用しています

function parseData(data)
{
    var html = '<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">';
    $.each(data, function( index, value ) {
        html = '<li>' +
            '<div data-role="collapsible">' +
                '<p>' + value.title + '</p>' +
            '</div>' +
        '</li>';
    });
    html += '</ul>';
    return html;
}


var div = $('#div');
div.html(parseData(data));
div.find('ul').listview('refresh',true);

jsfiddle

アイデア？

4

1 に答える 1

1

jQuery Mobile 1.4 Alpha 2の時点で.trigger('create')非.trigger('pagecreate')推奨となり、1.5 から削除されます。

これらの関数の置き換えは.enhanceWithin()、親要素で呼び出されると、内部のすべてのウィジェットが拡張されます。

また、折りたたみ可能なものの正しい構文/マークアップは

<div data-role="collapsible">
  <h4>Heading</h4> <!-- you were missing this tag -->
  <p>collapsible / expandable contents</p>
</div>

リストビューと折りたたみを強化するには、必要なのは

$('#div').enhanceWithin();

アップデート

margin折りたたみ式が親から継承されているliため、折りたたみ式の見出しとコンテンツのスタイルが不適切になります。以下の CSS を追加すると、この問題が修正されます。

li .ui-collapsible-heading, .ui-collapsible-heading-toggle {
  margin: 0 !important;
}

li .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle {
  margin-bottom: 1px !important;
}

デモ

于 2013-10-07T07:55:39.163 に答える