Циклическая фокусировка и сортировка по изотопу

У меня есть что-то вроде этого примера, сортировка работает хорошо. Насколько я вижу, isotope использует какой-то кеш, а затем, используя правила CSS, сортирует все в окончательном виде. Но на самом деле он не сортирует DOM, поэтому цикл фокусировки не работает должным образом. Есть ли что-то, что я могу сделать, чтобы исправить это поведение, кроме сортировки DOM самостоятельно?


jquery-isotope
person osdamv    schedule 19.02.2013    source источник
comment
вы спрашиваете, как изменить порядок индекса вкладки после применения сортировки/фильтра и т. д. с изотопом?   -  person Brian Vanderbusch    schedule 20.02.2013
comment
Это потребует от вас либо расширения плагина isotope, либо написания собственной функции переупорядочивания, установки свойства tabindex каждого элемента на основе относительного положения каждого из элементов dom сверху слева, установки порядка приоритета сверху, а затем слева (получение реквизита offset(). Я попробую для вас функцию, но я просто собираюсь спать, так что сегодня вечером может не получиться.   -  person Brian Vanderbusch    schedule 20.02.2013
comment
работал над этим более 20 минут, добился прогресса, но понял, что его нужно превратить в расширение плагина для учета параметров макета (все ли объекты имеют одинаковую высоту, ширину? в четных строках?), существующий диапазон tabindex соответствующих элементов и еще несколько мелочей. Обеспокоена совместимостью браузера, а также...   -  person Brian Vanderbusch    schedule 20.02.2013
comment
в моем случае все элементы имеют одинаковый размер, я думал об использовании объекта сортировки, который использует изотоп для выполнения моей сортировки   -  person osdamv    schedule 20.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

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

function sortFocus(sortClass) {
    var button = $('div.isotope-button').first() ;       

    setTimeout(function() {
        $('div.isotope-button.' + sortClass).each(function(index) {
            var pos = $(this).position(), posx = (pos.left) / button.outerWidth(), posy = ((pos.top) / button.outerHeight()) + 1;
            $(this).find('a').attr('tabindex', posy + '' + posx);
        });
    }, 1000);
}

некоторые мысли:

  • Плагин isotope не имеет функции обратного вызова после анимации.
  • расчет основан на размере кнопок, при условии, что все кнопки имеют одинаковый размер. Я не знаю, работает ли с разными размерами
  • В моем случае каждая изотопная кнопка имеет внутреннюю ссылку.
person osdamv    schedule 25.02.2013
comment
Это было то, на что я тоже смотрел. Спасибо за публикацию вашего решения :) - person agmcleod; 16.10.2013

arrow_upward
0
arrow_downward

Это также работает, filteredItems всегда возвращается в правильном порядке.

$myIsotope.on('arrangeComplete', function (e, filteredItems) {
  var tabIndex = 1;
  $(filteredItems).each(function (index, item) {
    $(item.element).find('a.title').attr('tabindex', tabIndex);
    tabIndex++;
  });
});
person Lomax    schedule 05.09.2017