Saya pemula menggunakan dojo toolkit dan saya mencoba membuat alarm di mana layar berkedip merah terus menerus ketika tombol ditekan dan hanya berhenti ketika tombol ditekan lagi. Saya telah dapat mengubah warna latar belakang sekali tetapi saya tidak tahu bagaimana membuatnya terus menerus terpicu antara menjadi merah atau tanpa warna latar belakang.

Di sini adalah file html saya dengan tabel:

<!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>

Ini button on() event handler saya untuk mengubah latar belakang sekali:

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"
    });
  });
});

Dan inilah css tabel saya. Saya punya pertanyaan lain tentang ini; bagaimana saya bisa mengganti css menggunakan kode? Karena ketika saya mengubah warna latar belakang hanya berlaku pada baris yang belum memiliki set warna latar belakang seperti ini: 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;
}
0
nanj 16 Agustus 2017, 00:51

2 jawaban

Jawaban Terbaik

Kode ini di sini:

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

Bisa coba ini sebagai gantinya:

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

Dan css Anda akan terlihat seperti ini

.blink {
    animation:blink 700ms infinite alternate;
}

@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

Di dojo, harus ada kelas yang mudah toggle mirip dengan jQuery. Jika tidak, tambahkan saja kondisional untuk memeriksa apakah kelas ada di sana. Jika ya, hapus kelas blink dan efeknya akan hilang.

0
Christopher Messer 15 Agustus 2017, 22:03

Cara yang lebih sederhana untuk melakukan ini adalah

/*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
        }
    });
});

Dan tambahkan kelas ini ke file css Anda

/*css*/
.background {
    background-color: red;
}
0
Marco Belladelli 31 Agustus 2017, 08:50