[jQuery] Jak wyrównać wysokość dowolnej ilości kolumn?

Data dodania wpisu: 04-11-2010

Tworząc layout stron internetowych nierzadko spotykamy się z sytuacjami, gdy pewne - niekoniecznie sąsiadujące ze sobą - elementy muszą mieć taką samą wysokość. Of kors - można zastosować CSS, ale co w przypadku, gdy zawartość tych elementów jest zmienna - wtedy stałe parametry w CSSie nie wystarczą, a inne sztucki mające na celu ciągnięcie ramówek do granic całego wrappera są rozwiązaniem beznadziejnym.

A można przecież dzięki jQuery zabawić się w linijkę, która odmierza maksymalną wysokość z wprowadzonych kolumn i dopasowuje do tej wysokości pozostałę podane w regule elementy.

Ale taki plugin przecież istnieje... ;)

Plugin jQuery, który napisałem i tutaj prezentuję, różni się od dostępnego już w sieci pluginu jquery.equalHeights jednym zasadniczym czynnikiem - tutaj bloki, które wyrównujemy, nie muszą znajdować się w tym samym kontenerze (standardowy plugin wymaga, aby elementy do wyrównania były umieszczone w jednym kontenerze i te elementy podrzędne wyrównuje - moim zdaniem rozwiązanie "na sztywno"), i tutaj jest przewaga, bo mamy pełną dowolność wyboru elementów - możemy wyrównać do wysokości (jeśli chcemy:P) nawet nagłówek, stopkę i reklamę ad-words;P

Sam plugin przedstawia się następująco (jest of kors idiotoodporny - mowa o kIEpskIEj przegladarce :P):

(function($){
    $.fn.equalHeights = function(){
        var max = 0;
        $(this).each(function(){
            if ($(this).height() > max) {
                max = $(this).height();
            }
        });
        if ($.browser.msie && $.browser.version == 6.0) {
            $(this).each(function() {
                $(this).css({
                    'height': max,
                    'min-height': max
                });
            });
        } else {
            $(this).each(function(){
                $(this).css({
                    'height': max
                });
            });
        }
    };
})(jQuery);

Natomiast jego wywołanie ogranicza się do wprowadzenia w parametrach listy elementów, które w jednej kolejce mają być wyrównane do tej samej wysokości, bez ograniczeń:) I róbta co chceta;P

$(document).ready(function(){
    $('#kolumna1, #header, #adwords').equalHeights();
});

Komentarze

Ten wpis nie posiada jeszcze komentarzy

Comments closed...