Как заставить вкладку dojo dijit мигать или мигать, когда происходит событие, и это не активная вкладка?

У меня есть контейнер вкладок 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>

The 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, чтобы вкладка мигала/мигала в течение нескольких секунд в этот момент.


dojo tabcontainer
person caj    schedule 19.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы перейти к кнопке вкладки, вы должны использовать «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);
});
person DrCJones    schedule 21.06.2012
comment
dojo.addClass и dojo.removeClass немного чище. Но в остальном хорошее решение! - person user931366; 02.05.2013

arrow_upward
0
arrow_downward

Возможно, вы просто захотите изменить «класс» диапазона заголовков вкладок (или это div? Не помню). Самый простой способ - использовать firebug, проверить элемент, используемый для заголовка вкладки, определить его в иерархии узлов, затем поместить идентификатор на вкладку, например tabMsg или что-то в этом роде, а затем вам просто нужно dijit.byId, чтобы получить нужную вкладку, а затем перейдите к узлу заголовка и добавляйте класс/удаляйте класс каждые секунды или 0,5 с, чтобы он «мигал».

Возможно, вы захотите добавить свойство «мигание» на свою вкладку, чтобы, пока это верно, вы переключали классы, а когда вы нажимали на вкладку, вы устанавливали для него значение false и отключали мерцание.

person PEM    schedule 20.06.2012
comment
Свойство мигания — неплохая идея. Сложность заключается в использовании dijit.byId для поиска правильного элемента. Я могу найти его с помощью Firebug, но из-за того, как отображается фактическая кнопка вкладки, было трудно найти правильный элемент. - person caj; 21.06.2012