Autodividers ListView con l'opzione pieghevole

Question

Sto lavorando su un listview che ha divisori di auto in base alla data, è una lista molto lunga & data-autodividers='true' funziona bene ma voglio migliorare ulteriormente, rendendo la listview pieghevole sulla data.

Questo può essere fatto dal back-end usando C# (sto lavorando su un sito web mobile di asp.net webform) dove raggruppo la mia lista in base al mese-anno e rendere ogni gruppo pieghevole.

Ma mi piacerebbe farlo con jQuery come faccio per autodivider. Ho impostato lo stesso su jsFiddle.

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

Come posso fare queste auto-divisorio pieghevole utilizzando jQuery senza farlo da file code-behind (C#)?

Non ho visto dove jquerymobile ha questo come opzione di compilazione.

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

Se ho capito il tuo problema, penso che basta utilizzare l'opzione di $ .mobile.listview.prototype.options.autodividersSelector . Ho avuto un problema simile, quindi se avete bisogno di elencarli in base all'attributo data sul singolo elemento, faccio:

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

    }; 
}); 

ho preparato un jsbin per questo: http://jsbin.com/enuwoj/1/edit

Answer 2

Ci sono due soluzioni per il vostro problema.

1. O si utilizzano i gruppi di elenchi comprimibili sul lato jQuery Mobile, quindi sarà possibile raggiungere esattamente ciò che si sta cercando. Puoi nee modificare l'aspetto dell'elemento usando CSS per farlo apparire come un listview.

http://jsfiddle.net/rc9Gk/

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

1. Seconda soluzione sarebbe quella di applicare i gestori di eventi personalizzati su Click del controllo ListView. Ogni volta che si verifica un evento click su un divisore di lista, è possibile nascondere i seguenti elementi dell'elenco fino al successivo auto-divisore. Questa soluzione ha bisogno di un po 'di codice. Se questa soluzione ti soddisfa, posso scrivere quel codice perché tu me lo faccia sapere.

Answer 3

Avrete bisogno di <div data-role="collapsible"> o <div data-role="collapsible-set">, a seconda se si desidera raggrupparli o meno.

Se si desidera che siano pre-compressi per impostazione predefinita, includere anche l'attributo .

Answer 4

Credo che il problema è risolto aggiungendo il seguente alla parte inferiore del vostro violino originale

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

Qui è la versione aggiornata di jsFiddle

In pratica, ogni volta che si fa clic su un divisore, sembra per tutti seguente LI fino al prossimo divisore e attiva la loro visibilità.