簡單的jQuery進度條

Question

假設：有一些cablemodems，並且一個男人想要從MySQL數據庫中列出他們的數據。 （IP地址，MAC地址，modemtype，...）

下面是HTML和PHP代碼：（$限值：15或25或50，用戶可以選擇）

<table> 
    <?php 
    $sql = "SELECT ... needed fields from some tables... LIMIT $start, $limit"; 

    $result = mysqli_query($conn, $sql) or trigger_error(mysqli_error($conn)); 

    while ($row = mysqli_fetch_object($result)) { 
     echo "<tr class='modem_row' id='$row->modem_id' style='color:gray'>\n"; 
     echo "<td>$row->mac_address</td>\n"; 
     echo "<td>$row->ip_address</td>\n"; 
     echo "<td>$row->type</td>\n"; 
     // ... 
     echo "</tr>\n"; 
    } 

    mysqli_free_result($result); 
    ?> 
</table> 

<div id="progress" style="display:none; width:150px; height:20px"></div> 

當數據庫查詢完成，然後一個jQuery腳本查詢所有顯示的調制解調器是否在線（通過SNMP）。這裏是jQuery腳本：

<script type="text/javascript"> 
    $(function() { 
    $(".modem_row").each(function(){ 
     var modem_id = $(this).attr("id"); 
     $.ajax({ 
     url: "/modules/get_modem_state.php?modem_id="+modem_id, 
     success: function(data) { 
      if (data == 'online') { 
      $('#'+modem_id).animate({color: 'black'}); 
      } 
     } 
     }); 
    }); 
    }); 
</script> 

好的，它的工作原理。但我想在一個簡單的HTML div中看到整個Ajax進度。當jQuery腳本開始時，那麼會出現'progress'div，然後在一個簡單的彩色條中顯示百分比，當所有ajax查詢完成時，'progress'欄消失。如果第一個查詢完成，那麼'progress'的div寬度將是10px，在第二個ajax查詢完成之後，'progress'div寬度將會是10px，如果$ limit = 15，那麼有15個ajax查詢。將20px等..）

我認爲應該使用jQuery Progressbar，但我不知道如何粘合在一起。

Answer 1

一個簡單的例子：

.progress-bar{height:20px; width:400px;} 
    .status{height:20px; background:green; width:0px; text-align:center;} 
    #btn{paddding:10px; width:100px; background:red;cursor:hand;cursor:pointer;} 

    <div> 
     <div id="btn" onclick="Call()">click here</div> 
    </div> 

    <div class="progress-bar"> 
     <div class="status"></div> 
    </div> 

    <table> 
     <tbody> 
     <tr id="row1" class="modem_row"><td> - </td></tr> 
     <tr id="row2" class="modem_row"><td> - </td></tr> 
     <tr id="row3" class="modem_row"><td> - </td></tr> 
     <tr id="row4" class="modem_row"><td> - </td></tr>  
     <tr id="row5" class="modem_row"><td> - </td></tr> 
     </tbody> 
    </table> 

JavaScript函數：

function Call(){ 

    var nRows = $(".modem_row").length; 
    if(nRows > 0){ 
    var width = $(".progress-bar").width(); 
    var unit = width/nRows; 
    var unitPercent = 100/nRows; 

    var $statusDiv = $(".progress-bar").children('.status').eq(0); 
    var oldWidth = 0; 
    var newWidth = 0; 
    var percent = 0; 

    var msTimer =0; 
    var count = 1; 

    $(".modem_row").each(function(){ 
     msTimer += 800;//miliseconds 
     setTimeout(function(){ //this code should be in ajax's success function: 
       oldWidth = $statusDiv.width(); 
       newWidth = oldWidth + unit; 
       percent = unitPercent*count; 
       //here you can use animate() with jqueryUI. 
       $statusDiv.width(newWidth).text(percent + " %");      
       count++; 
     }, msTimer); 

    });//each 

}//if 

}

測試它jsfiddle。

定義進度條的寬度，腳本會檢測它並計算必須增加多少。

Answer 2

您可以使用任何加載圖像。在這裏創建自己的加載圖像：http://www.ajaxload.info/

然後修改代碼：

<div class="loader" style="display:none;"> 
    <img src="loader.gif" alt="" /> 
</div> 

<script type="text/javascript"> 
    $(function() { 
    $(".modem_row").each(function(){ 
     var modem_id = $(this).attr("id"); 
     $(".loader").show(); 
     $.ajax({ 
     url: "/modules/get_modem_state.php?modem_id="+modem_id, 
     success: function(data) { 
      if (data == 'online') { 
      $(".loader").hide(); 
      $('#'+modem_id).animate({color: 'black'}); 
      } 
     }, 
     error: function(){ 
      $(".loader").hide(); 
     } 
     }); 
    }); 
    }); 
</script> 

您需要在<img />標記添加圖像。

如果你想使用jQuery UI進度條，那麼你將不得不手動設置「請求持續時間」。該請求可能會在您設置的時間段之前完成，或者在您設置的時間段之後完成。在這兩種情況下，這都是糟糕的用戶體驗。

這裏的設置jQuery UI的進度條鏈接：http://jqueryui.com/progressbar/#label

有沒有辦法，你可以得到請求的確切時間（請求DB +請求到服務器+加工+內存+ CPU ...很多的因素），除非你加載一個Flash文件。 Flash有一種技術可以計算舞臺上加載的所有組件的大小，它可以爲您提供精確的實時進度條。除非您構建Flash應用程序，否則使用它是沒有意義的。

編輯2：

下面是使用jQuery UI進度條解決方案：

<div class="loader" style="display:none;"> 
    <div id="progressbar"><div class="progress-label">Loading...</div></div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    var progress_duration = 2000; 
    var total_number_of_items = 15; 

    $("#progressbar").progressbar({ 
     value: false, 
     change: function() { 
      var percent = $("#progressbar").progressbar("value") + "%"; 
      $(".progress-label").text(percent); 
     }, 
     complete: function() { 
      $(".progress-label").text("Complete"); 
     } 
    }); 

    function calculateProgress(){ 
     var val = $("#progressbar").progressbar("value") || 0; 
     var step = Math.round(100/total_number_of_items); 
     var new_val = val + step; 
     if(new_val > 100) new_val = 100; 
     $("#progressbar").progressbar("value", new_val); 
     if(val < 99){ 
      setTimeout(calculateProgress, 80); 
     } 
    } 

    function animateProgressBar(){ 
     setTimeout(calculateProgress, progress_duration); 
    } 

    $(".modem_row").each(function(){ 
     var modem_id = $(this).attr("id"); 
     $(".loader").show(); 
     $.ajax({ 
      url: "/modules/get_modem_state.php?modem_id="+modem_id, 
      success: function(data) { 
       if(data == 'online'){ 
        animateProgressBar(); 
        $('#'+modem_id).animate({color: 'black'}); 
       } 
      }, 
      error: function(){ 

      } 
     }); 
    }); 
}); 
</script> 

和這裏的一些CSS代碼：

.ui-progressbar { 
    position: relative; 
} 
.progress-label { 
    position: absolute; 
    left: 50%; 
    top: 4px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #fff; 
} 

Answer 3

感謝AiApaec，最後的工作簡單進度： （修改後的JS/HTML代碼..）

<style> 
    .progress-bar { height:10px; width:200px } 
    .status { height:10px; background:silver; width:0px } 
</style> 

<div class="progress-bar"> 
    <div class="status"></div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
    var nRows = $(".modem_row").length; 
    if (nRows > 0) { 
     var width = $(".progress-bar").width(); 
     var unit = width/nRows; 
     var $statusDiv = $(".progress-bar").children('.status').eq(0); 
     var oldWidth = 0; 
     var newWidth = 0; 
     var i = 0; 

     $(".modem_row").each(function(){ 
     var modem_id = $(this).attr("id"); 
     $.ajax({ 
      url: "/modules/get_modem_state.php?modem_id="+modem_id, 
      success: function(data) { 
      oldWidth = $statusDiv.width(); 
      newWidth = oldWidth + unit; 
      $statusDiv.width(newWidth);      
      if (++i == nRows) { 
       $('.status').fadeOut(); 
      } 
      if (data == 'online') { 
       $('#'+modem_id).animate({color: 'black'}); 
      } 
      } 
     }); 
     }); 
    } 
    }); 
</script> 

我希望這會幫助別人。