Trucuri jQuery Coloane de inaltimi egale

    jQuery este o biblioteca din ce in ce mai utilizata in ultimul timp, si exista din ce in ce mai multe trucuri si tehnici, astfel incat pot fi satisfacute nevoile de "scriptare" ale oricui. De vreme ce jQuery ofera accesibilitate JavaScript programatorilor ce doresc tehnici vizuale si de interactiune cu utilizatorul in cadrul siteurilor lor, fara a necesita cunostinte extensive de programare, merita sa incercam sa exploram cateva dintre ele in aceste articole.

     Este evident pentru orice designer ca a adauga cateva detalii vizuale sau elemente "user-friendly" poate insemna diferenta dintre un design placut utilizatorilor si unul mediocru.Astfel, folosirea jQuery in cadrul unui site, il poate face mult mai vandabil.

     Coloanele de inaltimi egale au fost intotdeauna o problema pentru designerii ce folosesc div-uri, desi acum exista cateva solutii elegante. Printre aceste solutii exista bineinteles si varianta jQuery.Aceasta tehnica necesita doar o simpla functie JavaScript precum si integrarea acesteia cu layout-ul principal pentru ca totul sa functioneze perfect.

Coloane-Egale

 

    Pentru rezolvarea acestei probleme cu jQuery, adaugati urmatoarea secventa de cod la pagina care doriti sa aiba coloane de inaltimi egale sau includeti un fisier .js cu acest cod pentru o mai buna organizare si intretinere.

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
      Pentru a obtine coloane de inaltimi egale, introduceti de asemenea urmatorul cod in sectiunea din codul dumneavoastra:
<script type="text/javascript">
$(document).ready(function(){
equalHeight($(".col1"));
equalHeight($(".col2"));
equalHeight($(".col3"));
});

</script>
      Codul se va executa imediat ce DOM'ul e gata de a fi utilizat ($(document).ready(function()). Apoi, functia equalHeight calculeaza cu exactitate inaltimea coloanelor. Pentru a putea folosi codul corect, orice designer trebuie doar sa foloseasca div-uri cu clasele ".col1", ".col2",".col3".

Alex B.

1Comentarii la "Trucuri jQuery Coloane de inaltimi egale"

  1. Mihai spune:

    Folosesc aceasta functie pentru a egala 2 div-uri insa acum am o alta problema. Deoarece folosesc cateva pluginuri de java script care imi maresc si ele automat height-ul nu mai imi returneaza bine cel mai mare height aceasta functie de la jquery. Aveti vreo solutie? Multumesc mult!

Adauga Comentariu

Mesaj

Trimite