Tutorialy.com | internetový časopis o grafice a tvorbě webu

DHTML ProgressBar

02.03.2008Komentáře (3) 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=„JavaScript“ type=„text/javascript“> </script> </head> <body> <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> \--- 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=„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>







<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

Currently 6.51/10
1
2
3
4
5
6
7
8
9
10

Hodnocení: 6.5/10 (39 hlasováno)

Komentáře (3)

od: mirek15181 10-03-2008 00: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 08:05:01

"ešte raz TU." nezabudli ste tam dat odkaz?

od: Jerry Stoop 28-07-2010 03:04:40

Jenom si myslim ze by bylo daleko lepsi nedavat: ale misto toho dat:

.. kdyz je tam 10ms timer tak zbytecne se spousti ta funkce znova a znova i kdyz nikdo nic nepise.. takhle se spusti jenom po pridani dalsiho pismene..tudiz efekt je stejnej <img src="http://tutorialy.com/templates/obrazky/icon_wink.gif" alt=";-)" />
             </div>
             <br />
                        </div>
                    </div>
          <a name="comments"> </a>
                   Neregistrovaní uživatelé nemohou přidávat komentáře k článkům.
                  </div>
         
       </div>       <br>
     </div>
           <div id="footer">
                              <a href="http://tutorialy.com/menu/11-výměna-odkazů.html">výměna odkazů</a>
           
                     | 
                                        <a href="http://tutorialy.com/menu/10-mapa-webu.html">mapa webu</a>
           
                     | 
                                        <a href="http://tutorialy.com/rss.php">RSS zdroj</a>
           
                     | 
                                        <a href="http://www.pagerank.cz/optimalizace.php?kod=tutorialy.com">PageRank: 4</a>
           
                     | 
                                        ISSN 0322-9289
           
                     | 
                                        © 2005-2008 Copyright <a href="http://www.natio.cz">NATIO Solutions CZ s.r.o.</a>
           
                       </div>   </div>
  </div> 
  
  
  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7686907-5");
pageTracker._trackPageview();
} catch(err) {}</script>
  
  
  
    <script>
      window.fbAsyncInit = function() {
        FB.init({  
          appId   : '108731739171548',
          session : null, // don't refetch the session when PHP already has it
          status  : true, // check login status
          cookie  : true, // enable cookies to allow the server to access the session
          xfbml   : true // parse XFBML
        });

// whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.login', function() {
          window.location.reload();
        });
        FB.Event.subscribe('auth.logout', function() {
          window.location.reload();
        });
      };
      
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
  
  </body>
</html>

Tutorialy.com - internetový časopis o grafice a tvorbě webu