14

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

这可以使用 c# 从后端完成（我正在开发一个 asp.net webform 移动网站），我在其中根据 Month-Year 对列表进行分组并使每个组可折叠。

但我很想用 jQuery 来做这件事，就像我做autodivider. 我已经在 jsFiddle 上设置了相同的设置。

http://jsfiddle.net/5PnBT/10/

如何在不使用代码隐藏文件（c#）的情况下使用 jQuery 使这些自动分隔器可折叠？

我没有看到 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');
});
4

4 回答 4

1

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

  1. 您可以使用 jQuery Mobile 端的可折叠列表集，然后您将能够准确找到您正在寻找的内容。您可能需要使用 CSS 编辑元素的外观，使其看起来像一个列表视图。

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>
  1. 第二种解决方案是在列表视图控件的单击事件上应用自定义事件处理程序。每当列表分隔器上发生单击事件时，您可以隐藏以下列表元素，直到下一个自动分隔器。此解决方案需要一些编码。如果此解决方案适合您，我可以为您编写该代码，让我知道。
于 2013-07-07T11:03:05.940 回答
1

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

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

  };
});

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

于 2013-04-20T10:39:36.243 回答
1

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

$('.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，直到下一个分隔线并切换它们的可见性。

于 2013-09-20T22:03:34.313 回答
0

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

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

于 2013-07-22T21:16:55.330 回答