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

然而，这完全打破了列化器的功能。我的语法是否正确，或者我是否针对高度定位了错误的变量？

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

不确定这是针对这种情况的最佳代码，但可能是我采取的方法。

修改jQuery插件Columnizer

1 个答案: