1

我有一个 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 部分，因此此时选项卡会闪烁/闪烁几秒钟。

4

2 回答 2

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);
});
于 2012-06-21T15:29:03.570 回答
0

您可能只想更改选项卡标题跨度的“类”（或者它是一个 div？不记得了）。最简单的方法是使用 firebug，检查用于标签标题的元素，在节点层次结构中识别它，然后在标签上放置一个 id，例如 tabMsg 或其他东西，然后您只需使用 dijit.byId 即可获得正确的标签，然后到标题节点每隔几秒或0.5秒addClass/removeClass使其“闪烁”。

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

于 2012-06-20T07:15:48.663 回答