JavaScript a CSS na vytvorenie systému hodnotenia ... 5 hviezd!

V tomto článku sa budeme vidieť, ako vytvoriť systém hodnotenia obsahu založeného na už tradičný systém farebných pecky (systém hodnotenia).

V podstate to znamená nastavenie na strane klienta rozhranie pre zber hodnotenie našich užívateľov na určitú problematiku alebo obsahu našich stránok. Tá bude vyjadrená v užívateľskej hodnotenie od 1 do 5 hviezdičiek (realizované v praxi, nástroj pre meranie kvality vizuálne podobné tomu použitý na hoteli).

Tento článok sa bude zaoberať len otázkou na strane klienta vývoji (založený na CSS a Javascriptu) a v budúcnosti článku sme vyvinuli systém pre zber hlasov na server-side skriptovací jazyky, ktoré budú integrované s AJAX.

Začneme s jednoduchým screenshot vidieť výsledky, ktoré budeme vyrábať:

Predtým, než sa odváža do hlbín kódu vás pozývam, aby ste usporiadať dve malé GIF ukazovať hviezdy, prípadne farbu a šedej. Nižšie sú dva, ktoré som použil: Teraz môžeme vidieť kód.
Najprv sa pozrime, ako vytvoriť štylizovaný pomocou CSS:

 



 <style type="text/css">







 UL # STAR_RATING







 {



  



 rozpätie: 0px;



  



 padding: 0px;



  



 výška: 16px;



  



 list-style: none;







 }







 # STAR_RATING je







 {



  



 Šírka: 19px;



  



 výška: 16px;



  



 display: block;



  



 float: left;



  



 background-image: url ("star-off.gif ');



  



 background-repeat: no-repeat;



  



 kurzor: pointer;







 }







 # STAR_RATING li.on







 {



  



 background-image: url ("star-on.gif ');







 }







 # STAR_RATING span.output







 {



  



 padding: 3px;



  



 Farba: # 339900;



  



 font-váha: tučný;







 }







 </ Style>

 

V podstate sme definovali kontajnera pomocou ID (# STAR_RATING) a potom sme všetci štylizované prvky (zoznam s odrážkami - Managed "v súlade" - a jednoduchým <span>).

Teraz kód Javascript našej malej aplikácie:

 



 <script type="text/javascript">







 / / Som predpätie obraz dynamický efekt







 Staron var = new Image (); staron.src = "hviezda-on.gif";









 / / Definícia funkcie pre hlasovanie, ktorá bude zahájená







 / / OnClick prípade, že jedna z 5 hviezdičiek







 star_vota funkcie (QT)







 {



  



 / / Vytvorenie premenné s výstupom majú byť vrátené v čase hlasovania



  



 star_output var = '<span class="output"> ste hlasovali pre "+ + QT" hviezd </ span>';



  



 / / Dynamicky meniť obsah kontajnera DIV so správou



  



 / / Potvrdenie Hlasovanie prebehlo



  



 . Document.getElementById ("STAR_RATING) innerHTML = star_output;







 }









 / / Definícia funkcie pre "zapnutie" dynamicky hviezdy







 / / Jediným argumentom je počet hviezd na svetlo







 star_accendi funkcie (QT)







 {



  



 / / Uistite sa, že sú hviezdy DIV



  



 / / Ak je DIV neznamená, že už hlasovali



  



 if (document.getElementById ("star_1"))



  



 {



    



 / / Cyklus 5 DIV obsahujúci všetky hviezdy



    



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



    



 {



      



 / / Ak p je menší alebo rovný počtu hviezd na svetlo



      



 / / Nastavenie triedy dynamicky "on"



      



 if (i <= QT) document.getElementById ("star_" + i) className = 'on'.



      



 / / V opačnom prípade vypnite hviezda ...



      



 inak document.getElementById ('star_ "+ i) =''className.



    



 }



  



 }







 }









 / / Toto je funkcia, ktorá vytvorí výstup.







 / / Berie jeden argument počtu hviezdičiek, ktoré chcete zmeniť







 / / V predvolenom nastavení (to môže napríklad ukázať známku







 / / V predchádzajúcich hlasov)







 Funkcia hviezda (QT)







 {



  



 / / Tlač HTML kód, ktorý produkuje hviezdy



  



 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>');



  



 / / Zapnúť hviezdy v otázke definované



  



 star_accendi (QT);







 }







 </ Script>

 

Nemyslím si, že kód jazyka JavaScript vyžaduje ďalšie pripomienky.
Integrovať do našich stránkach systému hodnotenia sme tieto jednoduché kroky:

• sú v záhlaví stránky (<head> ...</ head>) CSS;
• Vždy sú na stránke Javascript;
• na stránke (<body> ...</ body>), kde chceme, aby naše hviezdy vložte tento jednoduchý pripomenutie:

 



 <script type="text/javascript"> hviezdy (3), </ script>

 

Výsledkom je to, čo sme graficky predstavoval na začiatku tohto článku.

Pozývam vás na ďalší článok, kde uvidíme, ako previesť tento jednoduchý DHTML skriptov do dômyselného volebný systém založený na Ajax.