Question

我正在研究listview基于日期的自动分频器，它是一个非常长的列表＆amp; data-autodividers='true'工作正常，但我想通过使listview在日期可折叠来进一步改进它。

这可以使用c＃（我在asp.net webform移动网站上工作）从后端完成，我根据Month-Year对列表进行分组，并使每个组都可以折叠。

但我希望像对待autodivider一样使用jQuery。我在jsFiddle上设置了相同的内容。

如何使用jQuery 使这些自动分割器可以折叠，而无需从代码隐藏文件（c＃）执行此操作？

我没有看到jquerymobile将此作为构建选项。

$(document).on("pageinit", "#page-wrapper", function () {
    $("#hp-latest-articles").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('date');
            return out;
        }
    }).listview('refresh');
});

Answer 1

如果我理解了您的问题，我认为您只需使用 $。mobile.listview.prototype.options.autodividersSelector 选项。我有类似的问题，所以如果你需要根据单个元素的date属性列出它们，请执行：

 $( document ).on( "mobileinit", function() {
  $.mobile.listview.prototype.options.autodividersSelector = function( element )       {
    return (element.attr('date'))       

  };
});

我为此准备了一个jsbin：http://jsbin.com/enuwoj/1/edit

Answer 2

您的问题有两种解决方案。

要么使用jQuery Mobile端的可折叠列表集，那么您将能够准确找到所需内容。您可能需要使用CSS编辑元素的外观，使其看起来像列表视图。

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>

第二个解决方案是在listview控件的click事件上应用自定义事件处理程序。每当在列表分隔符上发生单击事件时，您可以隐藏以下列表元素，直到下一个自动分隔符。该解决方案需要一些编码。如果这个解决方案适合您，我可以为您编写代码让我知道。

Answer 3

我相信通过在原始小提琴的底部添加以下内容来解决您的问题

$('.ui-li-divider').click( function(ev ){
  var li = $(ev.target).next(':not(.ui-li-divider)');
  while ( li.length > 0 ) {
      li.toggle();
      li = li.next(':not(.ui-li-divider)');
  }
});

以下是更新后的jsFiddle

基本上，每次单击分隔符时，它会查找所有后续LI，直到下一个分隔符并切换其可见性。

Answer 4

您需要<div data-role="collapsible">或<div data-role="collapsible-set">，具体取决于您是否要将它们分组。

如果您希望它们在默认情况下预先折叠，请同时包含data-collapsed="true"属性。

具有可折叠选项的Auto Dividers listview

4 个答案: