如何在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进度

回答

相关问题