1

データイコライザーを大規模以上に制限する方法とその可能性を知っている人はいますか? 大きなビューでそれを使用する3つの列がありますが、中および下のビューでは実際には必要ありません。

4

3 に答える 3

0

ありがとう@チャド、

$(window).on('load resize', function () {
    var minWidth = 640;
    var viewport = {
        width: $(window).width(),
        height: $(window).height()
    };

    if (viewport.width > minWidth && !$("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").attr("data-equalizer", "cre");
        $("#rateBox").attr("data-equalizer-watch", "cre");
        $("#cre-from").attr("data-equalizer-watch", "cre");
    } else if (viewport.width < minWidth && $("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").removeAttr("data-equalizer", "cre").height('auto');
        $("#rateBox").removeAttr("data-equalizer-watch", "cre").height('auto');
        $("#cre-from").removeAttr("data-equalizer-watch", "cre").height('auto');
    }
    $(document).foundation('equalizer', 'reflow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2016-04-05T15:29:22.733 に答える
0

この問題によると、まだ簡単にはできません。

ただし、次の方法でうまくいく場合があります。この例では、Foundation 5 に同梱されているデフォルトのメディア クエリ ブレークポイントを使用していることを前提としています。基本的に、この例ではウィンドウ サイズを確認し、サイズに応じてデータ イコライザー属性を設定しています。

<div class="row equal" data-equalizer>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>
        <h1>hello</h1>    
        <p>(lots of text, presumably)</p>
        <p>(lots of text, presumably)</p>
    </div>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>hi</div>
</div>

JavaScript:

function setEqualizer() {
    // get the width in ems.
    var widthEms = $(window).width() / parseFloat($('html').css('font-size'));
    if (widthEms < 64.063) {
        $('.equal').removeAttr('data-equalizer');
        $('.equal-watch').removeAttr('data-equalizer-watch');
    } else {
        $('.equal').attr('data-equalizer', '');
        $('.equal-watch').attr('data-equalizer-watch', '');
    }
    $(document).foundation('equalizer', 'reflow');
}

// set Equalizer upon load
setEqualizer();

ウィンドウのサイズ変更検出器を使用してこれを機能させることはできませんでしたが、ページが読み込まれると機能します。このフィドルで出力ペインのサイズを変更して、再実行してみてください。

jsfiddle の例

これが、より良い解決策を始めるのに役立つことを願っています.

于 2015-02-14T23:58:28.253 に答える