手动创建旋转活动指示符

Question

如果这个问题在某个地方被回答了，我很抱歉，但我找不到。

我正在为MS Dynamics开发可编辑的javascript网格，当用户单击网格上的"Save“按钮时，我试图显示加载屏幕(加载旋转器应该只覆盖我的网格--这实际上是显示在CRM窗口中的HTML web资源)。在CRM系统保存数据并重新加载我的网格之前，大约需要2-5秒。所以我想在这段时间内显示加载屏幕。

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

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

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

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

我知道你已经得到了答案，但我认为你可以使用普通的JS代码，而不是使用像spin.js这样的库。

您所需要的只是: 1)隐藏在页面加载上的div，覆盖您的表，其中旋转中心对齐；2)单击Save/Delete按钮，只需使div可见即可。3)一旦收到保存或删除数据的rest的响应，就再次隐藏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>

“联合来文法典”：

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

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

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

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

单击覆盖层上的任意位置以关闭它。

我使用@MattIn4D创建这里的覆盖