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，检查用于选项卡标题的元素，在节点层次结构中标识它，然后在tab上添加id，如tabMsg或其他东西，然后你只需要dijit.byId来获得正确的选项卡，然后每隔一秒或0.5秒转到标题节点和addClass / removeClass，使其“闪烁”。

您可能希望在选项卡中添加“闪烁”属性，这样就可以切换类，当您单击选项卡时将其设置为false并禁用闪烁。

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

2 个答案: