JavaScript i CSS stvoriti sustav ocjena ... 5 zvjezdica!

U ovom članku ćemo vidjeti kako stvoriti sustav ocjenjivanja sadržaja na sada tradicionalni sustav u boji pips (kategorija sustav).

Uglavnom to uključuje postavljanje na strani klijenta sučelje za prikupljanje procjena naših korisnika na određeni aspekt ili sadržaj web stranice. Evaluacija će se izraziti u user rating 1 - 5 zvjezdica (realiziran u praksi, instrument za mjerenje kvalitete vizualno slična onoj koja se koristi za hotel).

Ovaj članak će se baviti samo pitanje na strani klijenta razvoja (na temelju CSS i Javascript), te u budućnosti članku ćemo razviti sustav za prikupljanje glasova na temelju server-side skriptnih jezika koji će biti integriran s AJAX.

Mi smo započeli s jednostavnim screenshot da biste vidjeli rezultate koje će proizvesti:

Prije venturing u dubine kod vas pozivam da dogovoriti dvije male GIF prikazuje zvijezda, eventualno boje i siva. Ispod su dvije koje sam koristio: Sada možemo vidjeti kod.
Prvo da vidimo kako stvoriti stilizirane koristeći CSS:

 



 <style type="text/css">







 Ul # STAR_RATING







 {



  



 margin: 0px;



  



 padding: 0px;



  



 visina: 16px;



  



 Popis stilu: none;







 }







 # Njima STAR_RATING







 {



  



 širina: 19px;



  



 visina: 16px;



  



 prikaz: block;



  



 float: lijevo;



  



 pozadine-slike: url ('zvijezda-off.gif');



  



 pozadine-repeat: no-repeat;



  



 pokazivač: pokazivač;







 }







 # STAR_RATING li.on







 {



  



 pozadine-slike: url ('zvijezda-on.gif');







 }







 # STAR_RATING span.output







 {



  



 padding: 3px;



  



 Boja: # 339900;



  



 font-weight: bold;







 }







 </ Style>

 

U biti smo definirali spremnik pomoću ID-om (# STAR_RATING), a zatim smo svi stiliziranim elementima (popis s grafičkim oznakama - uspjela "u red" - i jednostavno <span>).

Sada za Javascript kod naše male aplikacije:

 



 <script type="text/javascript">







 / / Ja se predopterećenja efekt slika rollover







 Staron var = new Slika (); staron.src = "zvijezda-on.gif";









 / / Definiranje funkcija za glasovanje koja će biti pokrenuta







 / / Onclick slučaju da se jedna od 5 zvjezdica







 star_vota funkcija (QT)







 {



  



 / / Stvaranje varijable izlaz da se vrati u vrijeme izbora



  



 star_output var = '<span class="output"> ste glasovali za' + QT + 'zvijezda </ span>';



  



 / / Dinamički promijeniti sadržaj DIV spremnika s porukom



  



 / / Potvrda Glasanje je održano



  



 . document.getElementById ('STAR_RATING') innerHTML = star_output;







 }









 / / Definiranje funkcije za "napajanje" dinamički zvijezde







 / / Jedini argument je broj zvijezda na svjetlo







 star_accendi funkcija (QT)







 {



  



 / / Provjerite ima zvijezde DIV



  



 / / Ako DIV ne znači da je već glasovao



  



 if (document.getElementById ('star_1'))



  



 {



    



 / / Ciklus 5 DIV koji sadrži sve zvijezde



    



 za (i = 1, i <= 5; i + +)



    



 {



      



 / / Ako je p manji od ili jednak broju zvijezda na svjetlo



      



 / / Postavljanje klase dinamički "na"



      



 if (i <= QT) document.getElementById ('star_' + I) = className 'na'.;



      



 / / Inače, isključite zvijezda ...



      



 drugo document.getElementById ('star_' + I) = className''.;



    



 }



  



 }







 }









 / / Ova funkcija koja proizvodi izlaz.







 / / Traje jedan argument broj zvijezda želite uključiti







 / / Po defaultu (to se može, na primjer, pokazati dobivenu ocjenu







 / / U prethodnim glasova)







 funkcija zvijezda (QT)







 {



  



 / / Ispis HTML kod koji proizvodi zvijezde



  



 document.write ('<div id="STAR_RATING" onmouseout="star_accendi(' + QT +')""> <ul>');



  



 document.write ('<li id="star_1" onclick="star_vota(1)" onmouseover="star_accendi(0); star_accendi(1)"> </ li>');



  



 document.write ('<li id="star_2" onclick="star_vota(2)" onmouseover="star_accendi(0); star_accendi(2)"> </ li>');



  



 document.write ('<li id="star_3" onclick="star_vota(3)" onmouseover="star_accendi(0); star_accendi(3)"> </ li>');



  



 document.write ('<li id="star_4" onclick="star_vota(4)" onmouseover="star_accendi(0); star_accendi(4)"> </ li>');



  



 document.write ('<li id="star_5" onclick="star_vota(5)" onmouseover="star_accendi(0); star_accendi(5)"> </ li>');



  



 document.write ('</ ul> </ div>');



  



 / / Uključite zvijezde u pitanju definirane



  



 star_accendi (QT);







 }







 </ Script>

 

Ne mislim JavaScript koda potrebno daljnje komentare.
Integrirati u našim stranicama sustav ocjenjivanja smo slijedite ove jednostavne korake:

• uključiti u zaglavlje stranice (<head> ...</ head>) CSS;
• Uvijek su na stranici Javascript;
• na stranici (<body> ...</ body>), gdje želimo da naša zvijezda se pojavljuju umetnite ovaj jednostavan podsjetnik:

 



 <script type="text/javascript"> zvijezde (3); </ script>

 

Rezultat je ono što smo grafički su predstavljali početku ovog članka.

Pozivam vas na sljedeći članak u kojem ćemo vidjeti kako to pretvoriti ovaj jednostavan DHTML skripte u sofisticirani sustav glasovanja se temelji na Ajax.