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.

 

 

    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.