Изменение плагина jQuery Columnizer

Question

Я пытаюсь изменить плагин jQuery Columnizer для создания эффекта мега-меню в меню навигации, которое загружает динамическое/управляемое содержимое. Бизнес-правила состоят в том, что в пунктах меню должны быть по умолчанию два столбца (в настоящее время они по умолчанию равны 1), а если высота столбцов превышает высоту - в этом случае я помещаю 400 пикселей, а затем создаю новый столбец. Если он превышает 800 пикселей, создайте 4-й столбец.

Я изменил источник плагин Columnizer который показан здесь (я комментировал свой код с // jvirgo): http://screenquill.com/jquerytest/autocolumn.js и на этой скрипке:

http://jsfiddle.net/P4wVV/

моя модификация здесь: // jvirgo

if (targetHeight() > 100) { 
numCols == 3; 
} 
if (targetHeight() > 200) { 
numCols == 4; 
} 

Однако, это полностью разрушает функциональность столбца. У меня есть неправильный синтаксис или я настроен на неправильную переменную для высоты?

Answer 1

Я думаю, что переменная, которую вы хотели бы изменить, это «options.columns», а не maxHeight. Я бы, вероятно, внес свои изменения сразу после установки переменной maxHeight, на несколько строк выше, где вы сейчас находитесь. Это непроверенное:

var maxHeight = $(this).height(); 
// mod 
if (maxHeight > 100) { options.columns = 2 } 
if (maxHeight > 200) { options.columns = 4 } 
// end mod 
var $cache = $('<div></div>'); 

Вы также можете позвонить columnizer из вашей собственной функции, которая измеряет высоту и оставляет columnizer неизмененного (возможно, для использования в других местах на сайте):

$('div.subBody').each(function() { 
    var h = $(this).height(); 
    if (h > 100) { 
    var c = h > 200 ? 4 : 2; 
    $(this).columnize({columns:c}); 
    } 
}); 

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