Mai devreme sau mai târziu, fiecare codificator se confruntă cu o astfel de sarcină. Și poate fi rezolvată în moduri diferite.
Evaluarea arată
Metoda 1 - bunicul Metoda
Taie două imagini: una pentru valoarea goală (în acest caz, asteriscul), cealaltă pentru finalizare. Afișate pe site-ul cinci fotografii, multe dintre ele au nevoie pentru a goli, precum și completat programator specifică algoritmul:
Care sunt deficiențele aici?
- pentru un mic bloc a luat o grămadă de linii - nu cel mai bun impact asupra lizibilitate, de căutare și optimizare SEO;
- Este nevoie de două imagini separate - din nou aceeași încărcare a paginii, sarcina pe server;
- utilizarea imaginilor (tag-ul
) Pentru proiectarea, respectiv, pentru a scrie ceva sensibil în Alt nu au oportunități, și Google a avertizat. este mai bine să nu facă acest lucru;
- programator care a terminat un rating număr, tot trebuie să gândească mai departe și scrie codul pentru a afișa corect același rating de pe site-ul web.
Și, în opinia mea, cel mai mare defect - aproape ireal cu rating-ieșire nu este o valoare multiplu de 1 / N, unde N - k posibile evaluări în rating-ul (în acest exemplu 5). De exemplu, atunci când un aspect încerca să deducă o valoare de 64%. Site-ul ar trebui să aibă ceva de genul:
Metoda 2 - decente
Această opțiune rezolvă toate problemele de mai sus. Algoritmul pentru acest exemplu:
- face container, da un fundal cu un gol o stea, care se înmulțește cu axa x (background-repeat repeat-x.);
- a pus-un bloc, cu un fundal plin de stele (și apoi înmulțit cu fundal axa x). Implicit, acest bloc are o lungime (lățime) egal cu 0;
- în sursa HTML, folosind atributul style. egală cu lungimea unei valori nominală bloc de cod.
Diferența este greu de dor. Și crede-mă, ești un programator va fi recunoscător pentru un astfel de cod.
Pentru a reduce numărul de imagini individuale, atunci puteți aplica în condiții de siguranță sprite tehnica.
Evaluarea arată cu capacitatea de a vota
Puteți găsi de multe ori site-uri în cazul în care ratingul nu este doar un spectacol, și puteți, făcând clic pe ea, a pus evaluarea lui. De obicei, atunci când treceți cursorul mouse-ului peste o astfel de unitate, evaluare, ați ales, într-un fel iese din clasament poziție de repaus. În exemplul nostru, vom avea aceleasi stele, adaugand un al treilea - galben strălucitor, pentru a evidenția evaluarea selectată.
Pentru aceasta vom folosi următorul cod HTML
stars.png în acest exemplu este următoarea:
Demonstrație. Deliciile acestei metode:
- a declarat evaluarea de iluminat se produce fără a script-urile de aplicații (toate lucrări de Hover pseudo)
- programator, de asemenea, totul este transparent - pentru a obține rating dorit pe site, trebuie setat numai lățimea dorită a primului element al listei (cu clasa curentă)
- cod ca un întreg poate fi numit semantically
- pentru IE6 va trebui să adăugați un Hover emulare script, deoarece acest browser înțelege doar hover pentru link-uri
- o mulțime de cod
Script-ul foloseste jQuery