progressbar

最新推荐文章于 2022-10-29 20:03:37 发布

hqian407

最新推荐文章于 2022-10-29 20:03:37 发布

阅读量601

点赞数

文章标签： function intervals button instantiation timer null

本文链接：https://blog.csdn.net/hqian407/article/details/4853340

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit - ProgressBar test</title>

<link id="themeStyles" rel="stylesheet"
   href="../../dijit/themes/tundra/tundra.css">

<script type="text/javascript" src="../../dojo/dojo.js"
   djConfig="parseOnLoad: true, isDebug: true"></script>

<script type="text/javascript" src="_testCommon.js"></script>

dojo.addOnLoad(go);

  function go(){
   // note that programmatic instantiation doesn't pull any parameters from the srcNodeRef, not even id
   var theBar = new dijit.ProgressBar({id: "testBar", width: 400, 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("test").value="";
   dojo.byId("progressValue").focus();
   dojo.byId("progressValue").value = dijit.byId("setTestBar").progress;
   dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
   dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler);
   dojo.connect(dojo.byId("set"), "onclick", null, setParameters);
   dojo.connect(dojo.byId("startTimer"), "onclick", null,
    function(){ remoteProgress(dijit.byId("timerBar")); } );

// An example of polling on a separate (heartbeat) server thread. This is useful when the progress
// is entirely server bound and there is no existing interaction with the server to determine status.

// We don't have a server to run against, but a simple heartbeat implementation might look something
// like this:

  // function getProgressReport(){
  // var dataSource = "http://dojotoolkit.org";
  // return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
  // }

// Instead, we'll just tick off intervals of 10

  var fakeProgress = 0;
  function getProgressReport(){
   var deferred = new dojo.Deferred();
   fakeProgress = Math.min(fakeProgress + 10, 100);
   deferred.callback(fakeProgress+"%");
   return deferred;
  }

  function setParameters(){
   dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});
  }

  <h1 class="testTitle">
   Dijit ProgressBar Tests
  </h1>

  <h3>
   Test 1
  </h3>
  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" maximum="200" id="setTestBar" progress="20"
   dojoType="dijit.ProgressBar"></div>

  <h3>
   Test 2
  </h3>
  Write here:
  <input type="text" value="" name="test" maxLength="256" id="test"
   style="width:300" />
  <br />
  <br />
  <div id="testBar" style='width:300px'></div>
  <br />
  Small, without text and background image:
  <br />
  <div style="width:400px; height:10px" class="smallred" maximum="256"
   id="smallTestBar" dojoType="dijit.ProgressBar"></div>
  <br />
  Show decimal place:
  <div places="1" style="width:400px" maximum="256" id="testBarInt"
   dojoType="dijit.ProgressBar"></div>

  <h3>
   Test 3
  </h3>
  No explicit maximum (both 50%)
  <div style="width:400px" id="implied1" progress="50"
   dojoType="dijit.ProgressBar"></div>
  <br />
  <div style="width:400px" id="implied2" progress="50%"
   dojoType="dijit.ProgressBar"></div>

  <h3>
   Test 5 - indeterminate progess
  </h3>
  <input type="button" name="setIndeterminate1True"
   id="setIndeterminate1True" value="Make Indeterminate" />
  <input type="button" name="setIndeterminate1False"
   id="setIndeterminate1False" value="Make Determinate" />
  <div style="width:400px" indeterminate="true" id="indeterminateBar1"
   dojoType="dijit.ProgressBar"></div>
  <input type="button" name="setIndeterminate2True"
   id="setIndeterminate2True" value="Make Indeterminate" />
  <input type="button" name="setIndeterminate2False"
   id="setIndeterminate2False" value="Make Determinate" />
  <div style="width:400px" progress="50" id="indeterminateBar2"
   dojoType="dijit.ProgressBar"></div>

</body>
</html>

hqian407

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
progressbar

"http://www.w3.org/TR/html4/strict.dtd"> Dojo Toolkit - ProgressBar test content="text/html; charset=ISO-8859-1"> @import "../../dojo/resources/dojo.css"; @import "css/dijitTests.css";
复制链接

扫一扫