JavaScript DHTML/Ajax Layer/Progress Bar

Материал из Web эксперт
Перейти к: навигация, поиск

Horizontal and vertical ProgressBar with image indicator

<html>
<head>
<title>DynAPI Examples - ProgressBar</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.api");
  dynapi.library.include("ProgressBar");
</script>
<script language="Javascript">
  var hpb = new ProgressBar("horz",250,100,200,20,20);
  var vpb = new ProgressBar("vert",200,100,20,150,20);
  var ipb = new ProgressBar("horz",250,150,200,20,20);
  ipb.setLocalStyleAttribute("imageBar",dynapi.functions.getImage("./dynapiexamples/images/pbar.gif"));
  dynapi.document.addChild(hpb);
  dynapi.document.addChild(vpb);
  dynapi.document.addChild(ipb);
  var i=0;
  function startLoop(v){
    if(v!=null) i=v;
    hpb.setValue(i)
    vpb.setValue(i)
    ipb.setValue(i)
    i++;
    if(i<=100)setTimeout("startLoop()",100)
    status=hpb.getValue();
    return false;
  }
</script>
</head>
<body>
<a href="javascript:;" onclick="return startLoop(1);">Start</a>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Progressbar fade in and fade out

<A href="http://www.wbex.ru/Code/JavaScriptDownload/JSAX.20060317.zip">JSAX.20060317.zip( 154 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/ProgressBarinJavaScript.htm">ProgressBar in JavaScript</a> <A href="/Code/JavaScript/Ajax-Layer/ProgressBarinJavaScript.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/HorizontalandverticalProgressBarwithimageindicator.htm">Horizontal and vertical ProgressBar with image indicator</a> <A href="/Code/JavaScript/Ajax-Layer/HorizontalandverticalProgressBarwithimageindicator.htm"></a>

ProgressBar in JavaScript

<html>
<head>
<title>DynAPI Examples - HTML ProgressBar</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLProgressBar");
dynapi.library.include("HTMLButton");
</script>
<script language="Javascript">
// Write Style to browser
HTMLComponent.writeStyle({
  PBar:    "border: 1px solid #C0C0C0"
});
var img = dynapi.functions.getImage("./dynapiexamples/images/pbar.gif");
var t = "This is the Template:<center><table border="0" width="310"><tr><td width="100%">Progress:<br>{@pbar}<br>{@pbar1}<br><form>{@btnGo}</form></td></tr></table></center>";
var tp = new Template(t,100,100,350,200,"#EEEEEE");
tp.addChild(new HTMLProgressBar(null,150,20,10),"pbar");
tp.pbar.barCol="lime";
tp.addChild(new HTMLProgressBar("PBar",250,24,10,1,100),"pbar1");
tp.pbar1.barImage = img;
tp.addChild(new HTMLButton(null," Load ","Click here to view site"),"btnGo");
tp.btnGo.addEventListener({
  onclick:function(e){
    startLoop(0);
  }
});
dynapi.document.addChild(tp);
var i=0;
function startLoop(v){
  if(v!=null) i=v;
  tp.pbar.setValue(i)
  tp.pbar1.setValue(i)
  i++;
  if(i<=100)setTimeout("startLoop()",100)
  status=tp.pbar.getValue();
}
</script>
</head>
<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Progress_Bar&oldid=4171»