dijit tabcontainer如何隐藏标签页？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dijit tabcontainer如何隐藏标签页？相关的知识，希望对你有一定的参考价值。
我不知道如何在标签容器中隐藏标签。到目前为止，我尝试过的方法不起作用。
下面代码的结果是，未显示选项卡中的内容，但选项卡本身一直存在。它似乎没有隐藏选项卡。
我希望删除整个选项卡，就好像它不存在一样。
<div id="center" data-dojo-type="dijit/layout/TabContainer" controllerWidget="dijit.layout.TabController">
<div id="tab1" data-dojo-type="dijit/layout/ContentPane" title="tab1"></div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane" title="tab2"></div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane" title="tab3"></div>
</div>
这只是隐藏标签内容
console.log(dijit.byId("tab2"));
dijit.byId("tab2").style.display= 'none';
dijit.byId("tab2").resize();
这只是使按钮变灰
var tabContainer = dijit.byId("center"); //Tr
var tab = dijit.byId("tab2"); //tab Id which you want to show
tabContainer.selectChild(tab); //Show the selected Tab
tabContainer.getChildren()[0].controlButton.set('disabled', true);
我如何完全隐藏选项卡按钮和其内容，就好像它们从未出现过一样？
答案
您可以使用dojo/dom-style隐藏标签，方法是同时隐藏controlButton.domNode和domNode本身。但请先更改所选标签，然后再将其隐藏，如下所示：
var tabContainer = registry.byId("center");
var tab1 = registry.byId("tab1");
var tab2 = registry.byId("tab2");
tabContainer.selectChild(tab2); // change tab
domStyle.set(tab1.controlButton.domNode, "display", "none");
domStyle.set(tab1.domNode, "display", "none");
请参见下面的工作片段
require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
"dojo/dom-style"
], function(On, dom, ready, registry,domConstruct, TabContainer, ContentPane, domStyle) {
ready(function() {
var tabContainer = registry.byId("center");
var tab1 = registry.byId("tab1");
var tab2 = registry.byId("tab2");
tabContainer.selectChild(tab2);
domStyle.set(tab1.controlButton.domNode, "display", "none");
domStyle.set(tab1.domNode, "display", "none");
});
});html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#center {
height: 100% !important;
}<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
dojoConfig = {
parseOnLoad: true,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<body class="claro">
<div id="center" data-dojo-type="dijit/layout/TabContainer" >
<div id="tab1" data-dojo-type="dijit/layout/ContentPane" title="tab1">tab1 </div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane" title="tab2">tab2 </div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane" title="tab3">tab3 </div>
</div>
</body>以上是关于dijit tabcontainer如何隐藏标签页？的主要内容，如果未能解决你的问题，请参考以下文章
Dojo dijit.layout.TabContainer - 如何将类添加到选项卡？
将 dojox.datagrid 注入 dijit.layout.contentpane 到 dijit.layout.tabcontainer 时出现问题