手动创建旋转 activity 指标

Question

如果这个问题在某个地方得到了回答，我深表歉意，但我找不到。

我正在为 MS Dynamics CRM 开发 editable javascript 网格，我试图在用户单击网格上的 "Save" 按钮时显示加载屏幕（加载微调器应该仅覆盖我的网格 - 这实际上是 CRM window 中显示的 HTML 网络资源）。 CRM 系统保存数据并重新加载我的网格大约需要 2-5 秒。所以我想在那段时间显示加载屏幕。

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

基本上，我有一个 table，当用户点击 "Save" 或 "Delete" 按钮时，我希望表明幕后发生了一些事情。

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

Answer 1

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

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

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

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

如果这回答了您的问题，请告诉我。

Answer 2

我知道你已经找到了答案，但我认为你可以使用 vanilla JS 代码来完成，而不是使用像 spin.js

这样的库

您只需要： 1) 一个 div 隐藏在页面加载时覆盖你的 table ，微调器在其中对齐中心 2) 在 Save/Delete 按钮上单击您可以使 div 可见。 3) 一旦收到来自保存或删除数据的其余 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

手动创建旋转 activity 指标

manually create spinning activity indicators

javascript

jquery

dynamics-crm

spin.js

editablegrid