Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Autodividers listview with collapsable option

I am working on a listview which has auto dividers based on date it is a very long list & data-autodividers='true' works fine but I want to further improve it by making the listview collapsible on date.

This can be done from back-end using c# (I am working on an asp.net webform mobile website) where I group my list based on Month-Year and make each group collapsible.

But I would love to do it with jQuery as I do for autodivider. I have set up same on jsFiddle.

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

How can I make these auto-divider collapsible using jQuery without doing it from code-behind file (c#)?

I did not see where jquerymobile has this as a build in option.

$(document).on("pageinit", "#page-wrapper", function () {
    $("#hp-latest-articles").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('date');
            return out;
        }
    }).listview('refresh');
});
like image 686
Learning Avatar asked Mar 25 '13 05:03

Learning


2 Answers

If I have understood your problem, I think you just have to use the $.mobile.listview.prototype.options.autodividersSelector option. I had a similar problem, so if you need to list them according to the date attribute on the single element, do:

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

  };
});

I prepared a jsbin for that: http://jsbin.com/enuwoj/1/edit

like image 72
Mimo Avatar answered Oct 15 '22 06:10

Mimo


There are two solutions to your problem.

  1. Either you use the collapsible list sets on the jQuery Mobile side, then you will be able to reach exactly what you are looking for. You might nee to edit the looks of the element using CSS to make it look like a listview.

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>
  1. Second solution would be to apply custom event handlers on click event of the listview control. Whenever a click event occurs on a list divider you can hide the following list elements till the next auto-divider. This solution needs a bit of coding. If this solution fits you, I can write that code for you do let me know.
like image 23
Rahat Khanna Avatar answered Oct 15 '22 04:10

Rahat Khanna