道場ツールキット - どのように継続的にトリガするためにn個のイベントボタンの

をクリックして、私はDojoツールキットを使用したとの初心者です、私はボタンを押すと、ボタンが押されたときにのみ、停止されたときに、画面が連続して赤色に点滅し、アラームを作成しようとしています再び。私は一度背景色を変更することができましたが、それは赤または背景色の間で継続的にトリガする方法を知りません。道場ツールキット - どのように継続的にトリガするためにn個のイベントボタンの

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" type="text/css" href="alarm.css" /> 
     <!-- load Dojo --> 
     <script>dojoConfig = {parseOnLoad: true}</script> 
     <script src="dojo/dojo.js" data-dojo-config="async: true"></script> 
     <script> require(['myModule.js']); </script> 

     <title>Alarm test</title> 

    </head> 

    <body class="claro"> 
     <h1 id="greeting">Alarm test</h1> 

    <table data-dojo-type="dojox.grid.DataGrid" id="tableContainer"> 
     <thead> 
      <tr> 
       <th field="col1">Company</th> 
       <th field="col2">Contact</th> 
       <th field="col3">Country</th> 
      </tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
       <td>Germany</td> 
      </tr> 
      <tr> 
       <td>Centro comercial Moctezuma</td> 
       <td>Francisco Chang</td> 
       <td>Mexico</td> 
      </tr> 
     </thead> 
    </table> 

    <button id="progButtonNode" type="button"></button>   
    </body> 
</html>

ここに私のボタンを1回背景を変更するための（）イベントハンドラに次のとおりです：ここ

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"], 
function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     style.set("tableContainer", { 
     backgroundColor: "red" 
    }); 
    }); 
});

そして、私のテーブルのCSSがある

は、ここにテーブルと私のhtmlファイルです。私はこれについて別の質問があります。どのようにコードを使用してCSSを上書きすることができますか？私は、背景色を変更すると、それだけですでにこのように設定した背景色を持っていない行に適用されますので：http://imgur.com/rsCN8Vx

table, th, td { 
    border: 1px solid black; 
} 

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
}

出典

2017-08-15 nanj

ここにこのコード：

function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     style.set("tableContainer", { 
     backgroundColor: "red" 
    }); 
    }); 
});

ではなく、これを試みることができる：

を

function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     class.set("tableContainer", { 
     "blink" // or however you add a class in dojo, not sure 
    }); 
    }); 
});

そして、あなたのcssこの

のようになります。

dojoでは、jQueryに似たクラスtoggleに簡単にする必要があります。そうでない場合は、クラスが存在するかどうかを確認する条件を追加します。そうであれば、クラスblinkを削除して、エフェクトが消えます。

出典

2017-08-15 22:03:40

これを行うための、より簡単な方法は、

/*js*/ 
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"], 
function(style, dom, on, domClass) { 
    var blink; 
    on(dom.byId("progButtonNode"), "click", function() {  
     if(blink) { 
      clearInterval(blink); 
      blink = null; 
     } else { 
      blink = setInterval(function() { 
       domClass.toggle("tableContainer", "background"); 
      }, 1000); // 1 second 
     } 
    }); 
});

ことそして、あなたのCSSファイルにこのクラスを追加します

/*css*/ 
.background { 
    background-color: red; 
}

出典

2017-08-31 08:50:23

道場ツールキット - どのように継続的にトリガするためにn個のイベントボタンの

答えて

関連する問題