为autodividers设置自定义属性 [英] Set custom attribute for autodividers

问题描述

我想分割一个在jQuery-mobile中动态填充的ListView。我设置了属性 status =true和一些< status =false的listitems，可以自动将它们分成两组（下载/未下载）？

这是我的HTML：

 < div role =mainclass =ui-content jqm-content> 
< div> 
< ul id =linkListdata-role =listviewdata-autodividers =true> 
< / ul> 
< / div> 
< / div> 
  

我的JS：

  var $ li; 
 var $ status ='false'; 
 
 window.resolveLocalFileSystemURL（fileSource + val.title +.pdf，成功，失败）; 
 
 // 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 +<一个>< /锂>中）; 
 
 $（＃linkList）。append（$ li）.listview（'refresh'）; 
 $（＃linkList）。listview（{
 autodividers：true，
 autodividersSelector：function（li）{
 var out = li.attr（'status'）; 
退货; 
} 
}）。listview（'refresh'）; 
  

那么，是否可以自动执行此操作，还是必须按代码进行排序，并添加分隔符。原来的代码根本不会添加任何分隔符。 解决方案

首先，autodividers确实只在列表已经存在按状态排序。因此，您需要在将其添加到UL之前对其进行排序。

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

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

然后，在添加项目时，设置autodividersSelector以检索锚点上的data-attribute：

  $（'＃linkList'） 
 .empty（）
 .append（allfiles）
 .listview（{
 autodividers：true，
 autodividersSelector：function（li）{
 var out = li.find（'a'）。data（status）; 
 return out; 
} 
}）
 .listview（refresh）; 
  

工作 DEMO

I am trying to divide a ListView that is dynamically populated in jQuery-mobile. I am setting some listitems with attribute status="true" and some to status="false", and wonder if it's possible to automatically divide these into two groups (Downloaded/Not downloaded)?

This is my HTML:

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

My 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');

So, is it possible to do this automatically, or do I have to do the sorting by code, and add the dividers. The code as it is doesn't add any dividers at all.

解决方案

First, autodividers really only works if your list is already sorted by status. So you will want to sort it before adding it to the UL.

Next, for status you can use a data-attribute on the LI or the anchor within the li:

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

Then when adding the items, set the autodividersSelector to retrieve the data-attribute on the anchor:

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

Working DEMO

这篇关于为autodividers设置自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！