如何在td标签中显示页面加载的pace.js进度
我确实需要在pace.js标签中显示页面加载上的td进度，而不是显示在网页中间。
My :
<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>是否可以在第三个pace.js单元中显示使用td的进展情况？我之所以使用pace是因为零配置。如果不可能，请您用ajax/jquery指导我吗？
事先非常感谢。
回答 1
Stack Overflow用户
发布于 2017-04-18 13:57:28
你可以这样做，但这将需要一些工作。您需要修改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单元中。
attribution) Pace.js许可证：()
版权(c) 2013年HubSpot，Inc.
兹准许任何获得本软件副本和相关文件文件(“软件”)的人不受限制地处理软件，包括(但不限于)使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许被提供软件的人这样做，但须符合下列条件：
上述版权通知和本许可通知应包括在软件的所有副本或实质性部分。
软件按“原样”提供，没有任何明示或暗示的担保，包括但不限于适销性、特定用途的适用性和不侵权的担保。在任何情况下，作者或版权持有人均不得因与该软件有关的或与该软件有关的使用或其他交易而因或而引起的任何申索、损害或其他法律责任，不论是在合约诉讼、侵权或其他方面引起的。
https://stackoverflow.com/questions/43472193
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号