如何使用jquery ui进度条？ [英] how to use jquery ui progress bar?

问题描述

我正在尝试使用带有valum文件上传插件的jquery ui进度条。代码：

I am trying to use jquery ui progress bar with valum file upload plugin. Code :

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

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

但这不起作用，任何人都可以告诉我，如何正确使用进度条？

But this is not working, can anybody pls guid me, how to use progress bar properly ?

推荐答案

假设你有一个带的html< div id =progressbar>< / div> ;

以下代码将每10毫秒逐步完成一次进度条，直至达到100：

the following code will step through the progressbar once every 10 miliseconds untill it reaches 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尚未回答的问题的一部分。

Note: The other answers are also valid, I only posted this answer as an answer to "How to properly use a progressbar" part of the question which IMO has not been answered.

这篇关于如何使用jquery ui进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！