1

我确实需要pace.js在标签中显示页面加载的进度，td而不是显示在网页中间。

我的 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>

是否可以pace.js在第三个td单元格中显示进度？我使用速度的原因是因为 nil 配置。如果不可能，请您指导我使用 ajax/jquery 吗？

提前谢谢了。

4

1 回答 1

1

你可以这样做，但这需要一些工作。您需要修改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 许可证：（包括归属地）

版权所有 (c) 2013 HubSpot, Inc.

特此免费授予任何人获得本软件和相关文档文件（“软件”）的副本，以不受限制地处理本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售本软件的副本，并允许向其提供本软件的人这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或大部分内容中。

本软件按“原样”提供，不提供任何形式的明示或暗示保证，包括但不限于适销性、特定用途适用性和非侵权保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任承担任何责任，无论是在合同诉讼、侵权行为或其他方面，由本软件或本软件的使用或其他交易引起或与之相关。软件。

于 2017-04-18T13:57:28.027 回答