Список автодизеров с возможностью сбрасывания

Я работаю над listview, у которого есть автоматические разделители, основанные на дате, это очень длинный список, а data-autodividers='true' отлично работает, но я хочу еще больше улучшить его, сделав listview сворачиваемым на дату.

Это можно сделать с помощью back-end с помощью С# (я работаю на веб-сайте веб-формы asp.net), где я группирую свой список по месяцам и делаю каждую группу разборчивой.

Но я хотел бы сделать это с помощью jQuery, как и для autodivider. Я установил то же самое на jsFiddle.

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

Как я могу сделать этот автоматический разделитель с помощью 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');
});

Ответы

Ответ 1

Если я понял вашу проблему, я думаю, вам просто нужно использовать опцию $. mobile.listview.prototype.options.autodividersSelector. У меня была аналогичная проблема, поэтому, если вам нужно перечислить их в соответствии с атрибутом date для одного элемента, выполните:

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

  };
});

Я подготовил jsbin для этого: http://jsbin.com/enuwoj/1/edit

Ответ 2

В вашей проблеме есть два решения.

  • Либо вы используете разборные наборы списков на стороне jQuery Mobile, тогда вы сможете достичь именно того, что вы ищете. Вы можете отредактировать внешний вид элемента с помощью CSS, чтобы он выглядел как список.

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>
  • Второе решение - применить пользовательские обработчики событий в событии click элемента управления listview. Всякий раз, когда происходит событие клика в разделителе списка, вы можете скрыть следующие элементы списка до следующего автодеферирования. Это решение нуждается в некотором кодировании. Если это решение подходит вам, я могу написать этот код для вас, дайте мне знать.

Ответ 3

Я считаю, что ваша проблема решена путем добавления следующего к нижней части оригинальной скрипки

$('.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 до следующего делителя и переключает их видимость.

Ответ 4

Вам понадобится <div data-role="collapsible"> или <div data-role="collapsible-set">, в зависимости от того, хотите ли вы их группировать или нет.

Если вы хотите, чтобы они были предварительно свернуты по умолчанию, включите также атрибут data-collapsed="true".