JQuery UI之進度條——Progressbar

一、          前言

進度條可以向使用者顯示程式當前完成的百分比，讓使用者知道程式的進度，提高了使用者體驗。

 

二、          最簡單的例子

首先引入樣式和js庫：

    <link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" />

    <script type="text/javascript" src="js/jquery-1.3.2.min.js">script>

    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">script>

      可以使用div來作為顯示進度條的載體：

        <div id="divProgressbar">div>

      將上面的div變成進度條：

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});  //初始話進度條並設定初始值為30

                alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));  //讀取進度條的當前值

            });

        script>

      一執行例子就明白

 

三、          要進度條動起來怎麼辦？

做個小實驗，修改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>

      嘿嘿——進度條動起來了，而且彈出框的值也變化了。

 

四、          可以實用的進度條

修改程式碼如下：

        <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);

 

五、          在適當的地方終止這個傻頭傻腦的程式

其實我們只需要在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>

 

更多詳細資訊檢視：----&gt>轉載於:http://blog.csdn.net/soldierluo/article/details/5019887