使用 jquery 添加 UI 动画框架组件

Question

我正在构建一个简单的单页网站，当我单击页面上的按钮时，我想删除一些内容，显示加载旋转条 (https://getmdl.io/components/index.html#loading-section)，从 API 获取数据，显示接收到数据，然后移除加载微调器。

但是，当我尝试使用材料设计精简版微调器时，像这样使用 jquery 添加它：

$("body").append("<div class=\"mdl-spinner mdl-js-spinner is-active\"></div>")

它只是给了我“加载”这个词，没有动画微调器。我的理解是否存在缺陷，或者是否需要添加其他内容才能使其正常工作？

Answer 1

Material 必须在load 上初始化一些脚本，它会更新您的spinner element。但是当您稍后从jquery 添加时，它不会是initialize 脚本。所以它不起作用。

这是针对您的情况的一种解决方法。只需添加微调器div 和display:none 就像<div id="spinner" class="mdl-spinner mdl-js-spinner is-active" style="display:none;">。和show/hide div 根据您的要求。

我在按钮点击时执行了show/hide。您可以根据自己的要求对其进行自定义。查看下面的演示。

function ShowProgressBar() {
  $("#spinner").show();
  $("#show").hide();
  $("#hide").show();
}

function HideProgressBar() {
  $("#spinner").hide();
  $("#show").show();
  $("#hide").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- MDL Spinner Component -->
<div id="spinner" class="mdl-spinner mdl-js-spinner is-active" style="display:none;"></div>

<div>
  <input id="show" type="button" onclick="ShowProgressBar()" value="show" />
  <input id="hide" type="button" onclick="HideProgressBar()" value="hide" style="display:none;" />
</div>