JavaScript Tutorial/Dojo toolkit/ProgressBar

Материал из Web эксперт
Перейти к: навигация, поиск

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>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/ProgressBar&oldid=8535»