Na začiatok si uvedieme čo to vlastne ProgressBar je. Je to vlastne určitý prúžok, ktorý sa „plní“ pri zvyšovaní nejakej hodnoty. Ak niekto ešte stále nevie o čo ide tak tu nájdete výsledok tohoto tutoriálu: výsledný efekt
Takže ak už všetci vedia o čo ide pustíme sa do toho…
Na začiatok si napíšeme základný kód pre stránku (poprípade ak už
stránku vytvorenú máte tak tento krok môžete vynechať).
Náš kód bude nasledovný:
<html>
<head>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
<textarea cols="50" rows="8" id="textovepole"></textarea>
<br />
<div style="width:420px; height:10px; border:1px solid Black;">
<img src="pruzok.gif" height="10" style="width:0px;" id="bar" />
</div>
<br />
<span id="vypis"></span>
</body>
</html><textarea cols="50" rows="8" id="textovepole"></textarea><br />
<div style="width:420px; height:10px; border:1px solid Black;">
<img src="pruzok.gif" height="10" style="width:0px;" id="bar" />
</div>
<br />
<span id="vypis"></span><script language="JavaScript" type="text/javascript">
function progressbar(element,dlzka)
{
}
</script>Do premennej text si vložíme hodnotu textového poľa (text napísaný v ňom). Do novej premennej pocet si vložíme dĺžku premennej text. Do ďalšieho riadku vložíme podmienku, ktorá nám obmedzí počet napísaných znakov na dĺžku zadanú z parametra funkcie. Použijeme funkciu .substr(od,do). Ďalej si musime zadefinovať premennu velkost do ktorej vložíme zaokruhlenú hodnotu vyjadrujúcu počet % zaplnenia textového poľa. V ďalšom kroku budeme už definovať DHTML príkaz, ktorý zabezpečí „plnenie“ rámčeka. Pridáme ešte nejaké informácie o počtoch no a nakoniec opakovanie funkcie… V našej funkcii by sme teda mali mať tento kód:
<script language="JavaScript" type="text/javascript">
function progressbar(element,dlzka)
{
/*premenna text bude obsahovat hodnotu prvku textovepole
(nase textove pole)*/
text = textovepole.value;
//premenna pocet bude obsahovat cislo - dlzka retazca text
pocet = text.length;
//tato podmienka zabranuje tomu, aby bol
if (pocet > dlzka) { textovepole.value = text.substr(0,dlzka); }
/*premenna velkost bude obsahovat zaokruhlenu hodnotu % na kolko
je textovepole zaplnene*/
velkost = Math.round((pocet * 100) / dlzka);
/*DHTML - vlozime hodnotu premennej velkost do dlzky obrazka.
Pouzijeme parameter element*/
document.getElementById(element).style.width = velkost + "%";
/*do SPAN tagu vlozime informácie o pocte napiasanych znakov,
pocte zostávajúcich znakoch a pocte % zaplnenia*/
info_1 = "Počet znakov: " + pocet;
info_2 = "<br>Zostáva znakov: " + (dlzka - pocet);
info_3 = "<br>Zaplnené: " + velkost + "%";
vypis.innerHTML = info_1 + info_2 + info_3;
/*nakoniec opakovanie funkcie každych 10 milisekund s dvoma
parametrami*/
window.setTimeout
("progressbar('" + element + "','" + dlzka + "')", 10);
}
</script>Teraz už stačí iba do tagu BODY pridať onLoad=„progressbar(‚bar‘,300)“. Číslo 300 môžete nahradiť číslom, ktoré bude vyjadrovať maximálny počet povolených znakov. Celkovo by mal celý skript vyzerať takto:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function progressbar(element,dlzka)
{
text = textovepole.value;
pocet = text.length;
if (pocet > dlzka) { textovepole.value = text.substr(0,dlzka); }
velkost = Math.round((pocet * 100) / dlzka);
document.getElementById(element).style.width = velkost + "%";
info_1 = "Počet znakov: " + pocet;
info_2 = "<br>Zostáva znakov: " + (dlzka - pocet);
info_3 = "<br>Zaplnené: " + velkost + "%";
vypis.innerHTML = info_1 + info_2 + info_3;
window.setTimeout
("progressbar('" + element + "','" + dlzka + "')", 10);
}
</script>
</head>
<body onLoad="progressbar('bar',300);">
<textarea cols="50" rows="8" id="textovepole"></textarea>
<br />
<div style="width:420px; height:10px; border:1px solid Black;">
<img src="pruzok.gif" height="10" style="width:0px;" id="bar" />
</div>
<br />
<span id="vypis"></span>
</body>
</html>Dúfam, že tento PrograssBar využijete na svojich stránkach. Myslím, že sa celkom hodí ku tvorbe chatu, v ktorom má užívateľ povolené napísať iba určitý počet znakov. Snažil som sa to napísať čo možno najzrozumiteľnejšie aj pre začiatočníkov. Ak by aj tak nastali nejaké problémy napíšte na fórum. Celú ukážku ci možete pozrieť ešte raz TU.
GOOD LUCK IN DHTML 
AtLoX
Hodnocení tutoriálu: 1.2 (hodnotilo 75 uživatelů)