Cum sa creezi colturi rotunjite folosind jQuery

Din fericire, CSS3 a ieşit cu o modalitate de a crea colturi rotunjite în mod automat, fără a utiliza imaginile, dar pe de altă parte, multe browsere populare (cum ar fi Internet Explorer), mai poate dura o perioada pana sa poata suporta integral sau partial recomandarile CSS3 W3C.

Multi designer stiu cum sa creeze colturi rotunjite folosind CSS, HTML si o gramada de imagini, dar aceste tehnici implica scrierea multor linii de cod HTML / CSS pentru a face un lucru relativ simplu.

Un exemplu de cod HTML pentru a crea colturi rotunjite ar fi urmatorul.

<div class=”roundedbox”>
<div class=”hd”>
<div class=”c”> </ div>
</ div>
<div class=”bd”>
<div class=”c”>
<div class=”s”>
<- Continutul principal merge aici ->
</ div>
</ div>
</ div>
<div class=”ft”>
<div class=”c”> </ div>
</ div>
</ div>

Deci cum ti se pare? Este intr-adevar destul cod pentru a obtine un box care sa aiba colturile rotunjite. Problemele cu adevarat greu de rezolvat apar atunci cand vrei sa creezi/modifici o pagina care foloseste mai multe colturi rotunjite.

O solutie la aceasta problema ar fi jQuery. In loc sa scri de fiecare data cand ai nevoie de o rotunjire toata structura de div-uri de mai sus, mai bine folosesti o functie jQuery pe care o apelezi ori de cate ori ai nevoie.

Aceasta tehnica este preluata de la 15 Days Of  jQuery deci pentru mai multe detalii si informatii puteti accesa site-ul lor.

Prin utilizare scriptului de mai jos poti adauga si alte div-uri daca  ai nevoie.

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

Toata smecheria in exemplul de mai sus este utilizarea div.roundbox. Astfel, in loc sa scri de fiecare data codul HTML care ar avea ca efect rotunjirea colturilor, mai bine apelezi clasa roundbox. De aici jQuery stie ce are de facut.

O posibila structura de cod HTML apeland clasa roundbox ar fi urmatoarea:

<div class = "roundbox">
<- Continutul principal merge aici ->
</ div>

Cam asta a fost tot. Sper ca acest articol ti-a fost util. Daca ai intrebari sau comentarii posteazale mai jos.

Etichete:, , , , , , , , ,
Despre autor:

T.O.C. Despre T.O.C.

Facebook   |   Twitter


admin [at] prosoftdesign.ro

Ai mai putea fi interesat de ...

Lasă un comentariu