how to disable single tab in dojo tabcontainer

i want to disable single tab in tabcontainer of 开发者_如何学运维dojo .

Here's my workaround for this problem:

dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"none"});

and:

dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"inline-block"});

For some reason, altering the disabled property, or calling setDisabled does nothing for me.

You can't do it directly since this is not a feature of the DOJO tab container. There has been a bug against DOJO, open for about 3 years, to add the feature: http://bugs.dojotoolkit.org/ticket/5601

That defect also has a potential workaround in it.

dijit.byId('tab').controlButton.domNode.disabled = true

I answered this question in another thread. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:

How do I dynamically show and hide an entire TabContainer using DOJO?

You can override its default css to make the tabbar invisible.

dojo.attr(dijit.byId('tab'), "disabled", true);
dijit.byId('tab').onClick = function () { };

You can disable tabs by setting the disabled property of the pane: Source: https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html

pane.set("disabled", true);

Example:

<div data-dojo-type="dijit/layout/TabContainer" style="width: width: 350px;     height: 200px">
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-    dojo-props="selected:true">
        Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="second" title="My second     tab">
        Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-    dojo-props="closable:true">
        Lorem ipsum and all around - last...
    </div>
</div>

<script type="dojo/require">
    registry: "dijit/registry"
</script>
<button type=button onclick="registry.byId('second').set('disabled',     !registry.byId('second').get('disabled'));">
    toggle tab #2 disabled
</button>

Only problem here is that it's not visible to the user they can't click on it. You can these additional CSS selectors:

.dijitTab.dijitDisabled { 
    cursor: not-allowed !important;
}

.dijitTab.dijitDisabled > .tabLabel{
    cursor: not-allowed !important;
}