0

我正在尝试修改 jQuery Columnizer 插件以在加载动态/托管内容的导航菜单上创建大型菜单效果。业务规则是菜单项应该默认为 2 列（它们当前默认为 1），如果列的高度超过一个高度 - 在这种情况下，我放置 400px - 然后创建一个新列。如果超过 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;
}

但是，这完全破坏了 columnizer 的功能。我的语法不正确还是我的高度变量是错误的？

4

1 回答 1

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

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

于 2013-11-01T22:09:46.287 回答