Question

我确实要求在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显示进度？我使用节奏的原因是因为零配置。如果不可能，请你用ajax / jquery引导我吗？

非常感谢提前。

Answer 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替换为上面的那个，它会将进度指示符插入到{ {1}}单元格。

Pace.js License :( 包含在归因中）

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

如何在td标记中显示页面加载的pace.js进度

1 个答案: