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
});

注：メッセージングコード（ここには表示されていません）は機能します。この時点でタブが数秒間点滅/点滅するように、TODOセクションを置き換えるjavaScriptを知る必要があります。

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を使用し、タブタイトルに使用されている要素を確認し、ノード階層でそれを識別してから、tabMsgなどのIDをタブに配置し、dijit.byIdに合わせて適切なタブを取得することです。次に、タイトルノードに移動し、1秒ごとまたは0.5秒ごとにaddClass / removeClassを実行して、「点滅」させます。

タブに「点滅」プロパティを追加して、これがtrueのときにクラスを切り替え、タブをクリックするとfalseに設定して、点滅を無効にすることができます。

于 2012-06-20T07:15:48.663 に答える