JavaScript DHTML/Ajax Layer/Progress Bar
Horizontal and vertical ProgressBar with image indicator
<source lang="html4strict">
<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>
</source>
<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
<source lang="html4strict">
<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:| Progress: {@pbar} {@pbar1} <form>{@btnGo}</form> |
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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
