<html>
<head>
<script type="text/javascript" src="./dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser"); // scan page for widgets
dojo.require("dojo.string");
</script>
<style type="text/css">
@import "./dojo/resources/dojo.css";
@import "./dijit/themes/tundra/tundra.css";
@import "./dijit/themes/tundra/tundra_rtl.css";
@import "./dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript">
dojo.addOnLoad(go);
function go(){
//TODO: it's a little strange that id must be specified again?
var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000,
report:function(percent){
return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]);
}
}, dojo.byId("testBar"));
dojo.byId("progressValue").focus();
dojo.byId("progressValue").value = dijit.byId("setTestBar").progress;
dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
dojo.connect(dojo.byId("set"), "onclick", null, setParameters); //此处将按钮与事件绑定
dojo.connect(dojo.byId("startTimer"), "onclick", null,
function(){ remoteProgress(dijit.byId("timerBar")); } );
function indeterminateSetter(id, value){
return function(){
dijit.byId(id).update({'indeterminate': value});
}
}
dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null,
indeterminateSetter("indeterminateBar1", true));
dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null,
indeterminateSetter("indeterminateBar1", false));
dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null,
indeterminateSetter("indeterminateBar2", true));
dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null,
indeterminateSetter("indeterminateBar2", false));
}
var fakeProgress = 0;
function getProgressReport(){
var deferred = new dojo.Deferred();
fakeProgress = Math.min(fakeProgress + 10, 100);
deferred.callback(fakeProgress+"%");
return deferred;
}
function remoteProgress(bar){
var _timer = setInterval(function(){
var report = getProgressReport();
report.addCallback(function(response){
bar.update({progress: response});
if(response == "100%"){
clearInterval(_timer);
_timer = null;
return;
}
});
}, 3000); // on 3 second intervals
}
function setParameters(){
dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});//此处设置进度条数值
}
</script>
</head>
<body class="tundra">
Progress Value <input type="text" name="progressValue" id="progressValue" />
<br>
Max Progress Value <input type="text" name="maximum" id="maximum" />
<br>
<input type="button" name="set" id="set" value="set!" />
<br>
<div style="width:400px" annotate="true"
maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>
</body>
</html>