手动创建旋转活动指标答案

【问题标题】：manually create spinning activity indicators手动创建旋转活动指标
【发布时间】：2016-05-16 14:20:37
【问题描述】：

如果这个问题在某处得到解答，我深表歉意，但我找不到它。

我正在为 MS Dynamics CRM 开发可编辑的 javascript 网格，当用户单击网格上的“保存”按钮时，我试图显示加载屏幕（加载微调器应该只覆盖我的网格 - 这实际上是一个 HTML Web 资源显示在 CRM 窗口内）。 CRM 系统保存数据并重新加载我的网格大约需要 2-5 秒。所以我想在那段时间显示加载屏幕。

我找到了 spin.js http://spin.js.org/，它似乎很容易实现，但我没有意识到应该在什么事件上显示加载屏幕？

基本上，我有一个表格，当用户单击“保存”或“删除”按钮时，我希望显示引擎盖下发生了一些事情。

非常感谢您的时间和帮助！

【问题讨论】：

spinner的实现方式有很多种，需要弄清楚自己想要什么，详细询问。还向我们提供您迄今为止尝试过的和无效的方法

标签： javascript jquery dynamics-crm spin.js editablegrid

【解决方案1】：

听起来你知道你想从 spin.js 调用什么，你只是想弄清楚从哪里调用它。您可以尝试将其添加到您的 javascript 中，其中“#saveButton”和“#deleteButton”是您要触发脚本的按钮的 css 标识符。

    $("#saveButton").click(function(){
        displayLoadingPage();
    });

    $("#deleteButton").click(function(){
        displayLoadingPage();
    });

    function displayLoadingPage() {
        //call your spin.js code here.
    }

如果这能回答你的问题，请告诉我。

【讨论】：

是的，就是这样。所以我应该先在 displayLoadingPage() 函数中启动微调器，最后停止它？
好的，想通了。感谢您的帮助，我第一次阅读您的代码时不明白。现在一切都说得通了，当用户点击时，显示加载页面：D
您好 bocasa，抱歉，没有看到您的评论。是的，这些正在“点击”触发您的旋转事件。如果您发现这回答了您的问题，请给我一个赞成票和“接受”。 :) 我会继续为未来的用户完善答案。

【解决方案2】：

我知道你已经得到了答案，但我认为你可以使用 vanilla JS 代码而不是使用 spin.js 之类的库来做到这一点

您只需要： 1）隐藏在页面加载中的 div 覆盖您的表格，其中微调器对齐中心 2）在保存/删除按钮上单击您可以使 div 可见。 3）一旦你收到来自保存或删除数据的rest api的响应，再次隐藏div。

以下是 HTML：

<div class="container"> 
    <div id="loading" class="loading" onClick="hideSpinner()">
        Loading&#8230;     
    </div>
    <input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>

JS代码：

var loadingDiv = document.getElementById('loading');

function showSpinner() {
  loadingDiv.style.visibility = 'visible';
}

function hideSpinner() {
  loadingDiv.style.visibility = 'hidden';
}

这是一个演示：http://codepen.io/AshutoshD/pen/dMEGqM

单击叠加层上的任意位置以将其关闭。

我使用了@MattIn4D 创建的覆盖here

【讨论】：

这也是一段不错的代码，但我在 CRM 系统方面遇到问题，要使其正常工作，它确实存在 html Web 资源问题。当我第一次开始考虑加载屏幕时，我想在一两行代码中实现它，但显然还有更多内容:) +1 回答谢谢