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

回答

相關問題