Autodividers listview with collapsable option

我工作的listview有自动分频器基于日期它是一个很长的名单& data-autodividers='true'工作正常，但我想通过使listview可折叠的日期进一步改善它。Autodividers listview with collapsable option

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

但我很想用jQuery来做，就像我为autodivider做的那样。我已经在jsFiddle上设置了相同的内容。

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

我怎样才能让这些自动分配器可折叠使用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'); 
});

来源

2013-03-25 Learning

上面的代码工作正常。你需要将'listview'转换为'collapsible'集合。 – Omar 2013-03-25 12:05:06

@Omar： - 我不知道如何用jQuery来做到这点，否则我必须做一切从代码隐藏（c＃）。我希望它有一个内置的选项，使其可折叠。 – Learning 2013-03-25 12:36:01

没有什么是不可能的。我正在阅读关于动态创建“可折叠”列表的信息。我会试一试;）它与代码中的分隔符有点类似。 – Omar 2013-03-25 13:52:06

如果我明白你的问题，我想你只需要使用$ .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-20 10:39:36

您的解决方案是按日期分组，但我的实际问题是，我想使其默认可折叠，以便当用户点击日期时，它将展开列表和显示文章只有特定的日期...示例http://jsfiddle.net/5PnBT/9/ – Learning 2013-04-22 04:51:34

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

要么你使用jQuery Mobile端的可折叠列表集，那么你将能够达到你正在寻找的。您可能需要使用CSS编辑元素的外观，使其看起来像一个列表视图。

http://jsfiddle.net/rc9Gk/

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

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

来源

2013-07-07 11:03:05

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

如果您希望默认情况下它们是预先折叠的，则还应该包含属性。

来源

2013-07-22 21:16:55 McPhelpsius

你可以在jsfiddle上显示它，我试过它没有工作 – Learning 2013-07-24 05:14:05

我相信你的问题是通过添加以下到您的原始小提琴

$('.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

基本上解决了，每次你点击一个分频器，它看起来所有后续LIs直到下一个分隔符并切换其可见性。

来源

2013-09-20 22:03:34 ezanker

真棒，任何建议添加+/-基于状态的图标？ – Vamsi 2014-01-13 08:12:09

@Vamsi，在这里你去：http://jsfiddle.net/ezanker/4mPNj/ – ezanker 2014-01-13 14:56:01

谢谢，完美的作品 – Vamsi 2014-01-14 08:40:56

Autodividers listview with collapsable option

回答

相关问题