修改jQuery插件列化器

Question

我正在尝试修改jQuery Columnizer插件，以便在加载动态/托管内容的导航菜单上创建一个巨大的菜单效果。业务规则是菜单项应该默认为2列(它们当前默认为1)，如果列的高度超过一个高度-在本例中，我设置为400px -然后创建一个新列。如果超过800px，则创建第4列。

我修改了如下所示的Columnizer插件的源代码(我用//jvirgo注释了我的代码)：http://screenquill.com/jquerytest/autocolumn.js和这个小提琴：

http://jsfiddle.net/P4wVV/

我的修改在这里: // jvirgo

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

然而，这完全破坏了columnizer的功能。我有错误的语法吗?或者我的目标是错误的高度变量？

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});
  }
 });

我不确定这是不是最适合这种情况的代码，但我可能会采取这种方法。