Question

如果这个问题在某个地方得到解答，我道歉，但我找不到。

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

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

基本上，我有一张桌子，当用户点击＆＃34; Save＆＃34;或＆＃34;删除＆＃34;按钮，我想表明引擎盖下有什么东西发生了。

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

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，用旋转器对齐中心 2）在“保存/删除”按钮上单击，您可以使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

手动创建旋转活动指标

2 个答案: