Question

我是使用dojo工具包的初学者，我正在尝试创建一个警报，当按下按钮时屏幕会持续闪烁红色，并且仅在再次按下该按钮时停止。我已经能够改变一次背景颜色，但我不知道如何让它在红色或没有背景颜色之间连续触发。

这是我的html文件，其中包含表格：

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

这是我的按钮on（）事件处理程序，用于更改背景一次：

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。我有另外一个问题;如何使用代码覆盖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;
}

Answer 1

这段代码：

public class TimelineListActivity extends ListActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        Bundle recdData = getIntent().getExtras();
        String query = recdData.getString("query");
        int resourceId = recdData.getInt("resourceid");

        super.onCreate(savedInstanceState);
        setContentView(resourceId);

        SearchTimeline searchTimeline = new SearchTimeline.Builder().query(query).build();
        final TweetTimelineListAdapter adapter = new TweetTimelineListAdapter(this, searchTimeline);
        setListAdapter(adapter);
    }
}

可以试试这个：

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的易.blink { animation:blink 700ms infinite alternate; } @keyframes blink { from { background-color: white; } to { background-color: red; } };类。如果没有，只需添加一个条件来检查该类是否存在。如果是，请删除课程toggle，效果将消失。

Answer 2

更简单的方法是

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

Dojo Toolkit - 如何在按钮单击时连续触发n事件

2 个答案: