设置自动分隔符的自定义属性

Set custom attribute for autodividers

本文关键字：自定义属性 分隔符 设置      更新时间：2023-09-26

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

这是我的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');

那么，有没有可能自动完成，或者我必须通过代码进行排序，并添加分隔符。代码本身根本没有添加任何分隔符。

首先，只有当您的列表已经按状态排序时，自动分隔符才真正起作用。因此，在将其添加到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");

工作演示

相关文章：