0

equalHeightColumns.js を使用して、クロス ブラウザーに同じ高さを提供しています。これは、2 セットの同じ高さが必要になるまで正常に機能します。

だから現時点で私は持っています：

$(".row").each(function(){
    $(this).find(".equalHeight").equalHeightColumns();
});

<div class="row">
     <section class="equalHeight"></section>
     <section class="equalHeight"></section>
</div>
<div class="row">
     <section class="equalHeight"></section>
     <section class="equalHeight"></section>
</div>

ご覧のとおり、 equalHeight を持つすべてのものを同じ行内でのみ同じ高さにしたくありません。

問題は、マークアップを変更する必要があり、参照する行がないことです。rel='group2'属性を介して equalHeight 要素をグループ化できるように、これをライトボックス プラグインのように機能させることは可能ですか。

例：これは

<section class="equalHeight" rel="group1"></section>
<section class="equalHeight" rel="group1"></section>

<section class="equalHeight" rel="group2"></section>
<section class="equalHeight" rel="group2"></section>

equalHeightColumns.js

/*!
* equalHeightColumns.js 1.0
*
* Copyright 2013, Paul Sprangers http://paulsprangers.com
* Released under the WTFPL license
* http://www.wtfpl.net
*
* Date: Thu Feb 21 20:11:00 2013 +0100
*/
(function($) {
    $.fn.equalHeightColumns = function(options) {
        defaults = {
            minWidth: -1,               // Won't resize unless window is wider than this value
            maxWidth: 99999,            // Won't resize unless window is narrower than this value
            setHeightOn: 'min-height',  // The CSS attribute on which the equal height is set. Usually height or min-height
            heightMethod: 'outerHeight',// Height calculation method: height, innerHeight or outerHeight
            delay: false,
            delayCount: 100
        };
        var $this   = $(this); // store the object
        options     = $.extend({}, defaults, options); // merge options

        // Recalculate the distance to the top of the element to keep it centered
        var resizeHeight = function(){

            // Get window width
            var windowWidth = $(window).width();

            // Check to see if the current browser width falls within the set minWidth and maxWidth
            if(options.minWidth < windowWidth  &&  options.maxWidth > windowWidth){
                var height = 0;
                var highest = 0;

                // Reset heights
                $this.css( options.setHeightOn, 0 );

                // Figure out the highest element
                $this.each( function(){
                    height = $(this)[options.heightMethod]();
                    if( height > highest ){
                        highest = height;
                    }
                } );

                // Set that height on the element
                $this.css( options.setHeightOn, highest );
            } else {
                // Add check so this doesn't have to happen everytime
                $this.css( options.setHeightOn, 0 );
            }
        };

        // Call once to set initially
        if (options.delay){
            setTimeout(resizeHeight, options.delayCount); 
        } else {
            resizeHeight();
        }

        // Call on resize. Opera debounces their resize by default.
        $(window).resize(resizeHeight);
    };

})(jQuery);
4

2 に答える 2

2

自動スクリプトが必要な場合は、次のような再帰関数を実行する必要があります。

var $all = $('.equalHeight'),
    arrEqualH = [];

recursiveFilter()

function recursiveFilter(){
    var attr = $all.first().attr('rel');
    arrEqualH.push($('[rel='+attr+']'));
    $all = $all.not('[rel='+attr+']');

    if($all.length) recursiveFilter()
}

$.each(arrEqualH, function(){
    this.equalHeightColumns();
})

フィドル: http://jsfiddle.net/2w9tq/

于 2013-09-17T14:57:52.347 に答える