DHTML ProgressBar | Tutorialy.com - tvorba webu, photoshop, grafika, programování

Reklama

DHTML ProgressBar

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>

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ť:

<br />
<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ť:

<br />
<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=„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ů)