如何在 dojo tabcontainer 中禁用单个选项卡答案

【问题标题】：how to disable single tab in dojo tabcontainer如何在 dojo tabcontainer 中禁用单个选项卡
【发布时间】：2010-02-19 06:16:03
【问题描述】：

我想禁用 dojo 的 tabcontainer 中的单个选项卡。

【问题讨论】：

标签： dojo

【解决方案1】：

这是我解决此问题的方法：

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

和：

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

出于某种原因，更改 disabled 属性或调用 setDisabled 对我没有任何作用。

【讨论】：

【解决方案2】：

您不能直接执行此操作，因为这不是 DOJO 选项卡容器的功能。有一个针对DOJO的bug，开放3年左右，添加功能：http://bugs.dojotoolkit.org/ticket/5601

该缺陷也有潜在的解决方法。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我在另一个帖子中回答了这个问题。基本上它涉及到让 jQuery 参与进来。对我很有用。我拥有静态创建的所有选项卡（而不是以编程方式），并且我能够在 jQuery 的帮助下操作它们是显示还是隐藏。所有代码都在我的帖子中：

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

【讨论】：

【解决方案5】：

您可以覆盖其默认 css 以使标签栏不可见。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

您可以通过设置窗格的 disabled 属性来禁用选项卡：来源：https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html

pane.set("disabled", true);

例子：

<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>

这里唯一的问题是它对用户不可见，他们无法点击它。您可以使用这些额外的 CSS 选择器：

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

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

【讨论】：