手動で回転動作インジケータを作成

Question

この質問はどこかで解決されていますが、見つかりませんでした。

私はMS Dynamics CRMの編集可能なJavaScriptグリッドに取り組んでいます。ユーザーがグリッド上の「保存」ボタンをクリックすると、読み込み画面を表示しようとしています（ロードスピナーは、 CRMウィンドウ内に表示されるリソース）。 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）データを保存または削除する残りの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