DHTML ProgressBar
02.03.2008Komentáře (2) Kategorie: Tvorba webu » DHTML

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

<html>
<head>
<script language=„JavaS­cript“ type=„text/ja­vascript“>
</script>
</head>
<body>

<textarea cols=„50“ rows=„8“ id=„textovepo­le“></textare­a>



<div style=„width:420px; height:10px; border:1px solid Black;“>
<img src=„pruzok.gif“ height=„10“ style=„width:0px;“ id=„bar“ />
</div>



<span id=„vypis“></span>

</body>
</html>

  \--- Tento kód sa skladá z troch častí. Prvá časť: 

<textarea cols="50" rows="8" id="textovepole"></textarea>

 

Touto časťou sme definovali textové pole, ktoré bude mať 50 stlpcov, 8 riadkov a priradili sme mu id s hodnotou textovepole. Druhá časť: 





<div style="width:420px; height:10px; border:1px solid Black;">
<img src="pruzok.gif" height="10" style="width:0px;" id="bar" />
</div>

 

V tejto časti kódu sme si definovali kontajner DIV, ktorému sme priradili štýly: width:420px; – dĺžka 420 pixelov (možete si to podľa potreby zmeniť) height:10px; – výška 10 pixelov border:1px solid Black; – samozrejme čierny rámček hrubý 1 pixel Vnútri kontajnera DIV sme vložili obrázok. Ja som si vytvoril jednoduchý obrázok o veľkosti 5×10 pixeolv. Vyzerá takto:
Tento obrázok sa bude počas písania do textového poľa zväčšovať horizontálnym smerom. No na začiatku ho nesmie byť vidno, preto sme mu zadefinovali štýl width:0px; aby jeho šírka bola 0 pixelov. Taktiež sme mu priradili parameter id, ktorého hodnota bude bar. Tretia časť: 





<span id="vypis"></span>

 

Do HTML kódu si vložíme aj tag SPAN s parametrom id a hodnotou parametra vypis, aby sme v ňom mohli zobraziť nejaké popisné informácie o textovom poli. Týmto je náš HTML kód kompletný a možeme sa pustiť do programovania JavaScriptu, ktorý nám zabezpečí funkčnosť. V hlavičke súboru do tagu SCRIPT si vytvoríme novú funkciu progressbar s dvoma parametrami element a dlzka.



<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=„progres­sbar(‚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>



<div style="width:420px; height:10px; border:1px solid Black;">
<img src="pruzok.gif" height="10" style="width:0px;" id="bar" />
</div>



<span id="vypis"></span>

</body>
</html>

 

Autor článku: | Vytisknout článek | Odeslat e-mailem

Hodnocení: 6.6/10 (23 hlasováno)

Komentáře (2)
od: mirek15181 09-03-2008 23:50:26
Nový vzhled se se vážně povedl ! :-D nj když inovovali tutorials.cz ... :lol: Ale tenhle se mi líbí i víc... hold v jednoduchosti je síla :-D Doufám,že tu budou tutoriály rychle přibívat.

od: Brainiac 11-03-2008 07:05:01
"ešte raz TU." nezabudli ste tam dat odkaz?

  Neregistrovaní uživatelé nemohou přidávat komentáře k článkům.