Trucuri jQuery Colturi Rotunjite

Din fericire CSS3 a gasit o cale de a rezolva problema colturilor rotunjite, automat, fara a folosi imagini. Cu toate acestea, multe browsere extrem de folosite, precum Internet Explorer, nu suporta CSS3, si va mai trece ceva vreme pana se vor alatura recomandarilor W3C.

Multi designeri creaza colturi rotunjite folosind CSS, HTML si cateva imagini, dar aceasta metoda cauzeaza multa dezordine in codul HTML / CSS. Mai jos, aveti un exemplu al unei astfel de tehnici:

<div class="ColturiRotunjite">
<div class="hd">
<div class="c">
</div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<-- continutul principal este trecut aici-->
 </div>
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>

Dupa cum puteti observa, este destul de mult cod pentru niste colturi rotunjite. Majoritatea designerilor stiu ca e destul de greu de urmarit un astfel de cod, mai ales cand vorbim de o pagina cu mai multe imagini cu colturi rotunjite.

Astfel, in loc sa scriem toate acele div-uri de fiecare data cand avem nevoie de colturi rotunjite, putem sa ne folosim de functiile jQuery.Prin utilizarea scriptului de mai jos, div-urile necesare pot fi adaugate automat acolo unde sunt necesare.

<script type="text/javascript">
$(document).ready(function(){
    $("div.ColturiRotunjite").wrap('<div class="roundedbox">'+'<div class="bd">'
+'<div class="c">'+'<div class="s">'+'</div>'+'</div>'+'</div>'+'</div>');
});

</script>

Folosirea div.ColtuiRotunjite este cheia bucatii de cod de mai sus. Acum, in loc sa scriem toate acele div-uri cand avem nevoie de ele, putem pur si simplu sa utilizam clasa ".ColturiRotunjite". jQuery va traversa DOM-ul pentru a gasi toate elementele ce contin clasa ".ColturiRotunjite" si va efectua modificarile necesare.Mai jos aveti un exemplu al noii structuri HTML:

<div class="ColturiRotunjite">
  <-- continutul principal este trecut aici -->
</div>

Alex B.