为自动分频器设置自定义属性

Question

我正在尝试划分在 jQuery-mobile 中动态填充的 ListView。我正在设置一些属性为 status="true" 的列表项和一些属性为 status="false" 的列表项，想知道是否可以将它们自动分成两组（Downloaded/Not 已下载）？

这是我的 HTML:

<div role="main" class="ui-content jqm-content">
    <div>
        <ul id="linkList" data-role="listview" data-autodividers="true">
        </ul>
    </div>
</div>

我的 JS：

var $li;
var $status = 'false';

window.resolveLocalFileSystemURL(fileSource + val.title + ".pdf", success, fail);

// if file exists
function success() {
    $li.find("a").on("click", function(){ openPdf(val.title); });
    $status = 'true';
}

// if file doesnt exists
function fail() {
    $li.find("a").on("click", function(){ downloadPdf(val.title,val.url); });
    $status = 'false';
}

$li = $("<li><a href='#' status=''+status+''>"+val.title+"</a></li>");

$("#linkList").append($li).listview('refresh');
$("#linkList").listview({
    autodividers: true,
    autodividersSelector: function (li) {
    var out = li.attr('status');
    return out;
    }
}).listview('refresh');

所以，是否可以自动执行此操作，还是我必须按代码进行排序，然后添加分隔符。代码根本没有添加任何分隔符。

Answer 1

首先，只有当您的列表已经按状态排序时，自动分隔符才真正起作用。因此，您需要在将其添加到 UL 之前对其进行排序。

接下来，对于状态，您可以使用 LI 上的数据属性或 li 中的锚点：

'<li ><a href="#" data-status="' + item.status +'">' + item.val + '</a></li>'

然后在添加项目时，设置 autodividersSelector 以检索锚点上的数据属性：

$('#linkList')
    .empty()
    .append(allfiles)
    .listview({
        autodividers:true,
        autodividersSelector: function ( li ) {
            var out = li.find('a').data("status");
            return out;
        }
    })
    .listview("refresh");

Working DEMO

为自动分频器设置自定义属性

Set custom attribute for autodividers

html

javascript

jquery

jquery-mobile

cordova