WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY

Prvek WEBu - DrawPercentBar
Nová položka
Zobrazeno: 7232

Popis: Status bar v percentach
Funkčnost: IE 6-7, Opera 9+, Mozzila
Hodnocení: *****
Ukázka

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  // drawPercentBar()

  function drawPercentBar(percent, color, background, border) 
  { 

	var width = 180;

    if (!color) { color = "#B0B0B0"; }
    if (!background) { background = "none"; }
    if (!border) { border = "#000000"; }
 
    var pixels = width * (percent / 100); 

    document.write("<div style=\"position: relative; line-height: 1em; background-color: " 
                   + background + "; border: 1px solid " + border + "; width: " 
                   + width + "px\">"); 
    document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
                   + color + ";\"><\/div>"); 
    document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: " 
                   + width + "px; top: 0; left: 0\">" + percent + "%<\/div>");
    document.write("<\/div>"); 
  } 

</script>
</head>

<body>
<script type="text/javascript">
   drawPercentBar(40, "#b60000", "#FFFFFF", "#000000"); 
</script>
</body>
</html>