JavaScript Tutorial/Dojo toolkit/ProgressBar
Содержание
Create ProgressBar
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.ProgressBar"); function show() { var myDijit = new dijit.ProgressBar({ id : "pb1", places : 0, progress : "20%", maximum : 100 }); dojo.byId("my").appendChild(myDijit.domNode); window.setInterval(function () { var pb1 = dijit.byId("pb1"); pb1.update({progress : ++pb1.progress}); }, 500); } </script> </head> <body class="tundra" onLoad="show();">
</body>
</html></source>
ProgressBar creation
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.ProgressBar"); </script> </head> <body class="tundra">
</body>
</html></source>
ProgressBar dialog
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.ProgressBar"); dojo.require("dijit.Dialog"); dojo.addOnLoad(function( ) { var pb = new dijit.ProgressBar; var d = new dijit.Dialog; d.setContent(pb.domNode); d.show( ); }); </script> </head> <body class="tundra"> </body>
</html></source>
ProgressBar Interval
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.ProgressBar"); dojo.addOnLoad(function( ) { var progressInterval = setInterval(function( ) { dojo.xhrGet({ url : "get value from", load : function(response, ioArgs) { alert("load", response); if (response <= 100) { dijit.byId("pb").update({progress : response}); } else { clearInterval(progressInterval); } } }); }, 1000); }); </script> </head> <body class="tundra">
Loading...
</div> </body>
</html></source>
ProgressBar: maximum value, progress
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.ProgressBar"); dojo.addOnLoad(show); function show() { window.setInterval(function () { var pb1 = dijit.byId("pb1"); pb1.update({progress : ++pb1.progress}); }, 500); } </script> </head> <body class="tundra">
</body>
</html></source>
Set value for ProgressBar
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.ProgressBar"); dojo.require("dojo.parser"); function download(){ jsProgress.update({ maximum: 20, progress:0 }); for (var i=0; i<=20; i++){ setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 ); } } </script> </head> <body class="tundra">
<input type="button" value="Start" onclick="download();" /> </body>
</html></source>