0

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

ただし、これにより、列化機能の機能が完全に損なわれます。構文が間違っていますか、それとも高さの変数を間違ってターゲットにしていますか?

4

1 に答える 1

1

変更したい変数は、maxHeight ではなく「options.columns」だと思います。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 に答える