如何使道场 dijit 选项卡在事件发生时闪烁或闪烁，并且它不是活动选项卡

Question

我有一个 dojo dijit 选项卡容器，我希望选项卡在事件发生时闪烁几次，但它不是选定的选项卡。例如，当我收到聊天消息时，我希望"聊天选项卡"闪烁几次，作为已收到聊天的视觉通知。我很难找到要修改的正确控件（选项卡）。这是代码：

该 HTML：

<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',splitter: true">
<div id="tabChat" title="Chat" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="iconClass:'i-chat', design: 'sidebar'">
    <div id="pnlChatLog" style="background-color:#FFF; padding:0px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center', splitter:true">
        <div id="divChatLog" style="width:100%; height:100%; overflow-y:scroll; overflow-x:hidden;">
        </div>
    </div>
    <div id="pnlChatMessage" style="background-color:#FFF; padding:0px; overflow:hidden;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom', splitter:false">
        <input id="txtChatMessage" style="width:100%; margin:0px; border:0px;" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="intermediateChanges:false,placeholder:'Enter Message'" />
    </div>
</div>
<div id="tabQuestions" title="Questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="iconClass:'i-help', design: 'sidebar'">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center', splitter:false, gutters:false">
        <div style="background-color:#FFF; padding:0px; border-top:0px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center', splitter:true">
            <div id="gridQuestions"></div>
        </div>
    </div>
</div>

javaScript：

//Chat message Event
chat.on("message", function(e) {
    //Message code is here...
    //TODO: Make the tab flash if it is not the current tab
});

注意：消息代码（此处未显示）有效。我只需要知道什么javaScript将替换TODO部分，因此选项卡此时闪烁/闪烁几秒钟。

Answer 1

要进入选项卡按钮，您必须使用选项卡元素的"controlButton"然后修改domNode。下面是一个示例：

//A method for the blinking using setInterval. The top line shows
//how to  get the actual tab that you want to modify. Then add and remove the
//Hover classes for a nice flashing/blinking effect.
function blinkTab(tabId, count, interval) {
    var tabbutton = dijit.byId(tabId).controlButton.domNode;
    var interval = setInterval(function(){            
        if(count % 2 == 0) {
            tabbutton .className += " dijitTabHover";
            tabbutton .className += " dijitHover";
        }
        else {
            //Not sure this is the best way to remove a class but I couldn't find
            //a "clean" way to do it with dojo.
            tabbutton .className = tabbutton .className.replace( /(?:^|s)dijitTabHover(?!S)/ , '');
            tabbutton .className = tabbutton .className.replace( /(?:^|s)dijitHover(?!S)/ , '');
        }
        if(count == 0) {
            tabbutton .className = tabbutton .className.replace( /(?:^|s)dijitTabHover(?!S)/ , '');
            tabbutton .className = tabbutton .className.replace( /(?:^|s)dijitHover(?!S)/ , '');
            clearInterval(interval);
        }
        count--;
    }, interval);
}
//Now make the calls where desired
//Chat message Event
chat.on("message", function(e) {
    //Message code is here...
    blinkTab("tabChat", 10, 500);
});
//Question Event
questions.on("message", function(e) {
    //Question code is here...
    blinkTab("tabQuestions", 10, 500);
});

Answer 2

您可能只想更改选项卡标题范围的"类"（或者它是一个div？不记得了）。简单的方法是使用 firebug，检查用于选项卡标题的元素，在节点层次结构中识别它，然后在你的选项卡上放置一个 id，比如 tabMsg 或其他东西，然后你只需 ned 到 dijit.byId 以获得正确的选项卡，然后转到标题节点并每隔几秒钟或 0.5 秒添加一次 Class/removeClass 以使其"闪烁"。

您可能希望向选项卡添加"闪烁"属性，以便在这是真的时切换类，并且当您单击选项卡时，将其设置为 false 并禁用闪烁。