javascript - 如何将样式更新为 jquery mobile 中的列表视图？

Question

我正在从服务器获取一些数据，并创建了一个试图更新样式的 ul 列表。

似乎这listview('refresh',true)行不通。我正在使用 jqm 1.4 beta

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

一个想法？

Answer 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();

---

更新

Collapsibles 是margin从 parent继承的li，导致 collapsible 的标题和内容的样式不足。添加以下 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;
}

演示