ProgressBar in JavaScript : Progress Bar : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Progress Bar »

 

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!=nulli=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>

           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Progress Bar