一、先引入jquery和jquery-ui的js,例子以下：javascript

<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="JqueryUI/jquery-ui.js"></script>css

可使用div来做为显示进度条的载体：html

        <div id="divProgressbar"></div>java

      将上面的div变成进度条：jquery

        <script type="text/javascript">ajax

            $(function(){bootstrap

                $("#divProgressbar").progressbar({value: 30});  //初始话进度条并设置初始值为30app

                alert("当前值是: " + $("#divProgressbar").progressbar("option","value"));  //读取进度条的当前值异步

            });async

        </script>

      一运行例子就明白

 

3、          要进度条动起来怎么办？

作个小实验，修改jquery代码以下：

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar({value: 60});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar({value: 90});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

            });

        </script>

      运行，看是什么结果，进度条没变化，每次弹出框的值都是30吧！为何捏？由于.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到，在dialog那篇里也说到同一个控件是不容许被屡次初始化的，因此咱们必须用其它的方法来修改进度条的当前值，jQuery提供了.progressbar("option", "value", 60)方法来设置当前值，这里还能够发现，不在后面加数值参数的话就是读取当前值。

    再修改代码以下：

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar("option", "value", 60);

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar("option", "value", 90);

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

            });

        </script>

      嘿嘿——进度条动起来了，并且弹出框的值也变化了。

 

4、          能够实用的进度条

修改代码以下：

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();   //调用函数

               

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});   //初始化进度条，若是已经初始化则会跳过

                    var newValue = $("#divProgressbar").progressbar("option", "value") + 3; //读取进度条现有值并计算出新值

                    $("#divProgressbar").progressbar("option", "value", newValue);  //设置进度条新值

                    setTimeout(updateProgressbarValue, 500);    //使用setTimeout函数延迟调用updateProgressbarValue函数，延迟时间为500毫秒

                }

            });

        </script>

      这里最重要的是使用了setTimeout来延迟调用函数，而且这是一个自嵌套函数，若是没有终止它的话它将一直运行下去，这是不被容许的。

      在setTimeout(updateProgressbarValue, 500);前加入下面的代码就知道了：

        alert(newValue);

 

5、          在适当的地方终止这个傻头傻脑的程序

其实咱们只须要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了：

    if(newValue <= 100)setTimeout(updateProgressbarValue, 10);

这样咱们就能够在进度条满了后终止这个傻瓜继续执行。

最终代码以下：

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});

                    var newValue = $("#divProgressbar").progressbar("option", "value") + 10;

                    $("#divProgressbar").progressbar("option", "value", newValue);

                    alert(newValue);

                    if(newValue <= 100) setTimeout(updateProgressbarValue, 10);

                }

            });

        </script>

大文件上传带进度条的代码