javascript - 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隐藏选项卡,方法是同时隐藏 thecontrolButton.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>
推荐阅读
- c# - 不应忽略没有副作用的函数的返回值
- ruby-on-rails - 在 Rails 6 中使用 partials 来划分文件
- c# - 无法通过 SingleValueExtendedProperty 找到特定消息
- scenekit - ARKit相机框架中的纹理ARMeshGeometry?
- java - 在 docker 中部署到 wildfly 的 root
- elasticsearch - 获取 ElasticSearch 中一个字符串字段的平均长度
- c# - JSON响应没有在C#中反序列化?
- pandas - 在 Pandas 中从一列开始并跳转到另一列的最佳方式是什么?
- multithreading - 有没有办法在keep-alive-timeout之前终止keep-alive连接?
- android - 单击颤振附加按钮后无法进行热重载或热重启