如何在td標籤中顯示頁面加載的pace.js進度

我確實需要在網頁中間顯示td標籤頁面加載時的pace.js進度。如何在td標籤中顯示頁面加載的pace.js進度

我的HTML：

<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"/> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/green/pace-theme-center-circle.min.css"> 
</head> 
<body> 
<table border="1"> 
<tr> 
<th>Channel</th> 
<th>Health</th> 
<th>Action</th> 
</tr> 
<tr> 
<td>Mobile</td> 
<td class="tdcolor"> 
    <select > 
    <option value="0">Select</option> 
    <option value="1">Green</option> 
    <option value="2">Red</option> 
    <option value="3">Amber</option> 
    </select> 
</td> 
<td> <!--show progress bar here></td> 
</tr> 
</table> 
</body> 
</html>

是否有可能以顯示第三td電池使用pace.js進展如何？我使用步伐的原因是因爲零配置。如果這是不可能的，你可以用ajax/jquery指導我嗎？

很多預先感謝。

來源

2017-04-18 harshavmb

你可以這樣做，但這需要一點工作。您需要修改pace.js源文件，這意味着您需要託管或提供您自己的（修改過的）副本。

您需要進行的更改位於Bar.prototype.getElement方法中;有關示例，請參閱下面的修改後的功能。您可以準確複製該代碼，或者根據需要進行修改。

這些更改基本上將targetElement變量指向您的td單元格，並且還將進度指示器設置爲使用相對定位，以便它顯示在單元格內。

Bar.prototype.getElement = function() { 
    var targetElement = document.getElementsByTagName('td')[2]; 
    if (this.el == null) { 
    targetElement = document.querySelector(options.target); 
    if (!targetElement) { 
     throw new NoTargetError; 
    } 
    this.el = document.createElement('div'); 
    this.el.className = "pace pace-active"; 
    document.body.className = document.body.className.replace(/pace-done/g, ''); 
    document.body.className += ' pace-running'; 
    this.el.innerHTML = '<div class="pace-progress">\n <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>'; 
    targetElement = document.getElementsByTagName('td')[2]; 
    if (targetElement.firstChild != null) { 
     this.el.style.position = "relative"; 
     targetElement.insertBefore(this.el, targetElement.firstChild); 
    } else { 
     this.el.style.position = "relative"; 
     targetElement.appendChild(this.el); 
    } 
    } 
    return this.el; 
};

我不能在這裏提供一個工作的例子，因爲整個pace.js文件太大，但如果你用一個取代標準Bar.prototype.getElement上面，它會插入進度指示器成td細胞。

Pace.js License：（包含歸屬）

版權（C）2013 HubSpot公司

特此授權，免費的，任何得到複製人（包括但不限於使用，複製，修改，合併，發佈，分發，再許可和/或銷售軟件副本的權利）的軟件和相關文檔文件（「軟件」） e，並允許軟件提供者根據以下條件執行此操作：

上述版權聲明和本許可聲明應包含在本軟件的所有副本或主要部分中。

本軟件按「原樣」提供，不附有任何形式的明示或暗示的保證，包括但不限於對適銷性，特定用途適用性和非侵權性的保證。在任何情況下，作者或版權所有者都不承擔任何索賠，損害或其他責任，無論是在合同，侵權或其他方面的行爲，不論是由軟件或其使用或其他交易引起或與之相關的行爲。軟件。

來源

2017-04-18 13:57:28 freginold

很多謝謝，你真棒。它工作得很好。沒想到這一點。我可以在'td'標籤中看到進度條不舒服。任何減少進度條大小的建議，我實際上是在單個網頁上的許多'td'塊中調用它，所以希望儘可能小。我再次非常感謝你的幫助......:) – harshavmb

https://jsfiddle.net/1fetnn1z/是有代碼的小提琴。它可能會幫助你。 – harshavmb

@harshavmb樂意幫忙。您應該可以通過CSS調整進度指示器的大小。嘗試針對「步調進展」或「步調進步內」類。或者，您可以在'td'元素上設置最大尺寸，並確保進度指示器填充該空間，但不會溢出（導致滾動條）。 – freginold

如何在td標籤中顯示頁面加載的pace.js進度

回答

相關問題