Hlavní menu
Kategorie
Přihlásit
Anketa
Podporujeme
Jistě jste už alespoň jednou byli na YouTube, či jakýchkoliv jiných stránkách, které umožňují hodnocení svého obsahu. Obvykle se hodnotí články, fotky, příspěvky, komentáře atd. Dokonce i zde na Tutorialy.com se dají hodnotit články a dnes si ukážeme jak pomocí JavaScriptu takové hodnocení udělat. Samozřejmě že nebudeme rozebírat databázi ani PHP kód, jak výsledek hlasování uložit do databáze, to pomocí JavaScriptu ani nejde, ale ukážeme si, jak zobrazit ty hvězdičky a vykreslit jejich barvy podle toho, jak přes ně přejíždíme kurzorem a kolik bodů v hasování má daný článek.
Celý trik spočívá v tom, že máme deset hvězdiček, a každá má své jedinečné ID. Naše hvězdičky budou mít název ve tvaru star_cislo. Takže star1 až star10. Číslo proto, aby se k nim dalo jednoduše přistupovat přes JS. Pro celý příklad budeme potřebovat pouze dvě funkce, jedna zařídí, aby když přejedeme kurzorem přes hvězdičku, vybarvily se všechny od 1 až do aktivní, a druhá funkce zajistí aby když z hvězdičky kurzorem sjedeme, aby se vybarvil pouze počet hvězdiček, který odpovídá hodnocení článku. Takže jdeme na to.
K celému příkladu budeme potřebovat tři typy hvězdiček, jeden JS soubor a jeden HTML soubor. Hvězdičky si každý vytvoří sám ve Photoshopu, dle svého vkusu a nevkusu. Ovšem měly by to být hvězdičky pro prázdné hlasování, plné hlasování, a aktivní hlasování. Začneme tedy vytvořením souboru HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Hlasování</title>
<script type="text/javascript" src="./script.js"></script>
<style>
img {cursor:hand;cursor:pointer;border:0;margin:0;}
</style>
</head>
<body>
<h1>Hlasování</h1>
<img src="./hvezdicka_plna.gif" id="star_1"
alt="Hvězdička" onmouseover="starsUp(1);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_plna.gif" id="star_2"
alt="Hvězdička" onmouseover="starsUp(2);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_plna.gif" id="star_3"
alt="Hvězdička" onmouseover="starsUp(3);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_4"
alt="Hvězdička" onmouseover="starsUp(4);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_5"
alt="Hvězdička" onmouseover="starsUp(5);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_6"
alt="Hvězdička" onmouseover="starsUp(6);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_7"
alt="Hvězdička" onmouseover="starsUp(7);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_8"
alt="Hvězdička" onmouseover="starsUp(8);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_9"
alt="Hvězdička" onmouseover="starsUp(9);" onmouseout="starsOut(4);" />
<img src="./hvezdicka_prazdna.gif" id="star_10"
alt="Hvězdička" onmouseover="starsUp(10);" onmouseout="starsOut(4);" />
</body>
</html>
Tímto jsme si vytvořili výpis deseti hvězdiček, čtyř plných a šesti prázdných. Hvězdičky mají src hvezdicka_plna.gif a hvezdicka_prazdna.gif. To ve skutečnosti odpovídá hodnocení 4 z 10. (4 plné a 6 prázdných). Dalším parametrem u každé hvězdičky je ID. To už jsme probírali. ALT je běžným povinným parametrem, a dále máme dva parametry onmouseover a onmouseout. První znamená co se stane, když přes obrázek přejedeme myší, a druhý znamená co se stane, když z obrázku myší sjedeme pryč. V hodnotě parametru je odkaz na ještě neexistující funkci v JavaScriptu. Ty se jmenují starsUp(); a starsOut();. Každá má jeden parametr. U starsUp je to číslo, do kterého ID se mají hvězdičky po přejetí myši vybarvit. U starsOut je to číslo, které odpovídá vybarveným hvězdičkám při prvním naběhnutí, aby když z hvězdiček myší sjedeme se opět vybarvily do původního stavu. Nyní tedy vytvoříme soubor script.js a do něj napíšeme tyto dvě funkce:
function starsUp(num)
{
for(i=1;i<=10;i++)
{
var
starName = "star_" + i;
if(i<=num)
{
document.getElementById(starName).src="./data/hvezdicka_aktivni.gif";
}
else
{
document.getElementById(starName).src="./data/hvezdicka_prazdna.gif";
}
}
}
Nyní si tuto funkci rozebereme. To co dělá už jsem napsal, ale jak to dělá? Obsahuje cyklus, který se spustí na každé zavolání funkce. Tedy vždy když přejedeme myší přes nějakou hvězdičku. Funkce má parametr num, který určuje ID, do kterého se mají hvězdičky vybarvit. Protože ID je ale ve tvaru star_num, tak v každém průchodu cyklem vytvoříme proměnnou starName, která už obsahuje celé ID hvězdičky. Dále vidíme podmínku, když je číslo průchodu cyklem menší než parametr num (tedy pro všechny hvězdičky s ID menším než je parametr), tak nastavíme té hvězdičce jinou cestu k obrázku, tudíž se vybarví jinak. Tady použijeme hvězdičku s názvem hvězdicka_aktivni.gif, abysme je rozlišili od ostatních. Pokud vybarvíme v řadě už všechny hvězdičky s ID nižším než na které se nacházíme, bude dále vybarvovat ostatní obyčejnou prázdnou barvou.
Nyní v tom samém souboru vytvoříme další funkci sloužící k vybarvení hvězdiček do původního stavu. Má opět jeden parametr, který je vždy stejný a odpovídá aktuálnímu hodnocení článku. Takže:
function starsOut(num)
{
for(i=1;i<=10;i++)
{
var
starName = "star_" + i;
if(i<=num)
{
document.getElementById(starName).src="./data/hvezdicka_plna.gif";
}
else
{
document.getElementById(starName).src="./data/hvezdicka_prazdna.gif";
}
}
}
Říkáte si že jsou to úplně stejné funkce? Ano jsou, pouze se liší v zadání parametru a místo hvezdicka_aktivni.gif se používá hvezdicka_plna.gif, pro uvedení do původního stavu. Princip zústává stejný jako u minulé funkce. Postupně obarvíme všechny hvězdičky.
Na tento příklad se můžete podívat na mých stránkách a zkusit nějaký článek ohodnotit.
Jak údaje z tohoto hlasování uložit si ukážeme příště v sekci PHP. Doufám že se Vám tento tutoriál líbil, a že se stane příjemným zpestřením Vašich stránek.
Podívej se na tenhle článek: http://css.interval.cz/clanky/hodnoceni-hvezdickami/
A alespoň je vidět že to jde i přes JS