jQuery – Lectia 1 [Nivel: Incepator]

Astăzi vom crea o funcţie simplă cu ajutorul librăriei jQuery. Ne vom folosi de fişierul creat pentru colţuri rotunjite, astfel încât să fie totul mai uşor de înţeles.

Vom folosi o funcţie care să facă să dispară/apară #coltrotunjit şi care să modifice anumite parametri din cadrul CSS.

Pentru a folosi jQuery, va trebui să încărcăm în librăria (o puteţi descărca împreună cu exemplul la sfârşitul tutorialului).




 

Codul CSS va fi acelaşi ca în tutorialul anterior :


#coltrotunjit
{
width:100px; /* latimea va avea 100px */
height:50px; /* inaltimea va avea 50px */
background:#ff0000; /*culoarea va fi rosie*/
padding:5px;
border-radius:5px;
-moz-border-radius:5px; /* pentru versiunile vechi de mozilla */
-webkit-border-radius:5px;/* pentru versiunile vechi de google chrome si safari */
}

#coltrotunjit p
{
text-align:center;
color:#fff;
font-size:14px;
}

 

Am adăugat codul pentru scriptul jQuery în secţiunea , iar acestaeste explicat linie cu linie astfel încât să fie mai uşor de înţeles :




În afară de toggle() se pot folosi şi alte funcţii cum ar fi show(), slideUp(), slideDown(), hide() etc. Mai multe efecte găsiţi aici şi aici.

Codul HTML este foarte simplist. Am scos textul din #coltrotunjit pentru că în momentul în care este apăsat va dispărea tot ce este în interiorul acelui div, adică şi textul. La primul click pe Apasa! div-ul va dispărea, la următorul click va apărea şi tot aşa 🙂


Apasa!

DEMO | DOWNLOAD

Colturi rotunjite utilizand CSS3

Bună seara,

În primul rând tutorialele pe care le voi face pe acest mini-blog se adresează celor familiarizaţi deja cu (măcar) următoarele limbaje : (x)HTML, CSS, Javascript, jQuery, PHP. Din moment ce bănuiesc că majoritatea dintre cei interesaţi de aceste tutoriale sunt începători, nivelul de dificultate va fi mic spre mediu, aşa că dacă nu stăpâniţi în totalitate limbajele de mai sus, nu ar trebui să vă speriaţi. Dacă totuşi doriţi să aprofundaţi limbajele mai sus menţionate vă recomand site-urile următoare :

– Pentru (x)HTML, CSS si JavaScript : W3Schools Online Web Tutorials

– Pentru jQuery : jQuery: The Write Less, Do More, JavaScript Library

– Pentru PHP : PHP: Hypertext Preprocessor

Bănuiesc că majoritatea dintre voi aţi aflat deja de HTML5 şi de CSS3. Ar trebui să începem printr-o descriere a acestora, dar nu cred că este necesar în momentul de faţă, având în vedere că nu vreau sa irosesc timpul nimănui (nici pe al meu şi nici pe al dumneavoastră) aşa că voi încerca să relatez totul cât mai pe scurt.

Mini-Capitolul 1.  De ce să folosesc CSS3 în locul metodei deja tradiţionale a imaginilor?

Există câteva argumente pentru care codul scris în CSS3 este mai avantajos decât cel al imaginilor :

  1. Încărcare mai rapidă a paginilor, având în vedere că nu se preiau imagini.
  2. Culorile se pot schimba mult mai rapid, în cazul în care este necesar.
  3. Flexibilitate, în sensul că block-ul dumneavoastră poate fi mărit sau micşorat atât pe lăţime cât şi pe înălţime fără a vă deteriora colţurile.

Mini-Capitolul 2. Există dezavantaje?

Da. Există un dezavantaj destul de mare, în sensul că browserele mai vechi nesuportând CSS3 nu vor recunoaşte codurile necesare, şi deci colţurile vor rămâne drepte. Browserele care suportă în momentul de faţă sunt :

  1. Mozilla Firefox (3+)
  2. Safari (3+)
  3. Google Chrome
  4. Opera (10.5+)

Mini-Capitolul 3. Codul propriu-zis

În momentul de faţă, atributele CSS pentru colţuri rotunjite nu sunt încă finalizate astfel încât, anumite browsere (Mozilla, Google Chrome sau Safari) folosesc anumite convenţii. Astfel, pentru Mozilla avem :


-moz-border-radius // (toate colţurile)
-moz-border-radius-topright // (colţul din dreapta sus)
-moz-border-radius-bottomright // (colţul din dreapta jos)
-moz-border-radius-topleft // (colţul din stânga sus)
-moz-border-radius-bottomleft // (colţul stânga jos)

Pentru Google Chrome sau Safari avem :


-webkit-border-radius // (toate colţurile)
-webkit-border-top-right-radius // (colţul din dreapta sus)
-webkit-border-bottom-right-radius // (colţul din dreapta jos)
-webkit-border-top-left-radius // (colţul din stânga sus)
-webkit-border-botom-left-radius // (colţul stânga jos)

 

Standardul CSS :


border-radius // (toate colţurile)
border-radius-topright // (colţul din dreapta sus)
border-radius-bottomright // (colţul din dreapta jos)
border-radius-topleft // (colţul din stânga sus)
border-radius-bottomleft // (colţul stânga jos)

Atât pe Google Chrome cât şi pe Mozilla Firefox (versiunile noi) codul standard CSS ar trebui sa funcţioneze corect.

Mini-capitolul 4. Exemplul

Vom crea un box de culoare roşie cu toate colţurile rotunjite, direct din codul CSS:


#coltrotunjit
{
width:100px; /* latimea va avea 100px */
height:50px; /* inaltimea va avea 50px */
background:#ff0000; /*culoarea va fi rosie*/
padding:5px;
border-radius:5px;
-moz-border-radius:5px; /* pentru versiunile vechi de mozilla */
-webkit-border-radius:5px;/* pentru versiunile vechi de google chrome si safari */
}

#coltrotunjit p
{
text-align:center;
color:#fff;
font-size:14px;
}

Codul HTML pentru Output folosit de mine este următorul :





Cril Design - Colturi rotunjite.
 


test

DEMO              |              DOWNLOAD

Sper să vă fie de folos acest mic tutorial. 🙂

Un mic blog

Am deschis un mini-blog in cadrul website-ului nostru. Platforma utilizata este a celor de la WordPress. Speram ca prin intermediul acestui blog sa va ajutam cu tutoriale si sfaturi legate de webdesign. Sa ne auzim cu bine la urmatorul post 🙂