如何使用jquery ui进度条？

我想用valum文件上传插件使用jquery ui进度条。代码：如何使用jquery ui进度条？

<div id="pb"></div> 

     ..... 
    onProgress: function (id, fileName, uploadedBytes, totalBytes) { 
     $("#pb").progressbar({ value : uploadedBytes }); 
    }, 
    . .... .

但是，这不工作，任何人都可以指导我，如何正确使用进度栏？

来源

2012-09-09 gaurav

你有什么错误...？ –

不工作的描述太广泛。这可能只是无关的错误，阻止你的脚本工作。 – TigOldBitties

我的回答对你有帮助吗？让我知道结果.. – ffffff01

假设你有一个<div id="progressbar"></div>

的HTML下面的代码将通过每10毫秒一次，直到它达到100的进度步骤：

<script type="text/javascript"> 
    var i = 0; //variable used to count the steps 
    function myclick(){ // function called on a button click for example 
     var int = self.setInterval(
      function(){ 
       if (i == 100) window.clearInterval(int); 
       $("#progressbar").progressbar("value", i); 
       i++; 
      } 
      , 10); 
    } 

    $('button').button().click(myclick); // a button element which will 
             // start the progress bar 
    $("#progressbar").progressbar(); //this part sets up the progressbar 
</script>

注：其他的答案也有效，我只是将此答案作为“如何正确使用进度条”的答案发布，这是IMO尚未回答的问题的一部分。

来源

2012-09-09 12:38:01 TigOldBitties

进度条以百分比表示。您需要将uploadedBtyes转换为totalBytes的百分比，然后将其作为数字传递给选项的值属性。

来源

2012-09-09 11:00:38

您需要计算上传的百分比字节数。

var percentValue = (uploadedBytes/totalBytes) * 100 

$("#pb").progressbar({ 
     value: percentValue 
});

来源

2012-09-09 11:15:45 ffffff01

如何使用jquery ui进度条？

回答

相关问题