Jquery Isotope PLugin: пользовательский режим макета: строки категории - как добавить заголовок к каждой строке категории - PullRequest
Новая
       9

Jquery Isotope PLugin: пользовательский режим макета: строки категории - как добавить заголовок к каждой строке категории

2 голосов
/ 14 марта 2012

Я пытаюсь настроить плагин Isotope jquery Дэвида ДеСандро, но ничего не получается ....

Я пытаюсь добавить имя категории в качестве заголовка для пользовательского макета: Строки категории

вот ссылка на пользовательский макет на веб-сайте Дэвида ДеСандро: http://isotope.metafizzy.co/v1/custom-layout-modes/category-rows.html

Так что я хочу, чтобы он был точно таким же, как в примере, но просто поместил название каждой категории над соответствующей строкой.Возможно ли это с Изотопом?

ура и спасибо за ваше драгоценное время!

1 Ответ

0 голосов
/ 19 марта 2012
Короче

, я вставил для каждой категории элемент div с классом заголовка для элементов, дал этому классу стиль для заголовка, который представляет собой полную длину контейнера и некоторую меньшую высоту, и поместил в div содержимое для заголовок.
затем просто применил layoutMode.
category - объект с информацией категории. 

var h = '';
$.each(categories,function(i,v) {
                //insert header row
                if($('.element.'+v.code).length){
                    h = h+'<div class="element category header '+v.type+'" data-type="'+v.type+'" data-category="'+v.code+'"><img src="'+v.icon+'"> '+v.title+'</div>';
                }
            });
            $container.isotope('insert',$(h));
            $container.isotope( {
                sortBy : $(this).attr('data-sort'),
                sortAscending : false,
                layoutMode: categoryRows,
                categoryRows : {
                    gutter : 2
                }
            });

Я попробовал также обратный вызов вставки здесь, но, кажется, мерцает больше, чем без.

но вы должны думать о большем:

  • получить строку заголовка над элементами, когда sortAscending имеет значение true
  • удаление заголовка при применении другого LayouMode (там отсутствует обратный вызов удаления, но setTimeout делает это)
  • не добавлять заголовок снова, если он уже есть

Я все еще красноречив, но это мой подход.

...