首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使dijit TabContainer选项卡大小相同,并均匀地将其扩展到选项卡容器的大小。

使dijit TabContainer选项卡大小相同,并均匀地将其扩展到选项卡容器的大小。
EN

Stack Overflow用户
提问于 2016-09-06 21:22:26
回答 1查看 256关注 0票数 1

你能告诉我如何使标签的大小相同,并均匀地伸展到TabContainer的大小吗?下图显示标签的大小是不同的,它们是左对齐的。但是我希望它们是一样大小的,应该是标签容器的1/3。

代码语言:javascript
代码运行次数:0
运行
复制
var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
});

var cpOrg = new ContentPane({
     title: "Mississippi",
     content: "Mississippi"
});
tc.addChild(cpOrg);

var cpShared = new ContentPane({
     title: "Utah",
     content: "Utah"
});
tc.addChild(cpShared);

var cpPrivate = new ContentPane({
     title: "New York",
     content: "New York"
});
tc.addChild(cpPrivate);

tc.startup();
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-07 09:46:40

它很简单,只需找到类并将样式应用于它。

要动态地做这件事,不管你有多少标签:

  1. 计算孩子的数量
  2. 计算tabContainer的宽度
  3. 适用于所有的孩子,计算出的whidth (容器/儿童数量-其他东西)
  4. 创建window resize更改事件以使width动态

以下是一个解决方案:

代码语言:javascript
代码运行次数:0
运行
复制
require([
	"dojo/query",
  "dojo/on",
	"dojo/dom-style",
  "dijit/layout/TabContainer", 
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {
  
  var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
  },"tabContainer");

  var cpOrg = new ContentPane({
       title: "Mississippi",
       content: "Mississippi"
  });
  
  tc.addChild(cpOrg);
	
  var cpShared = new ContentPane({
       title: "Utah",
       content: "Utah"
  });
  tc.addChild(cpShared);

  var cpPrivate = new ContentPane({
       title: "New York",
       content: "New York"
  });
  
  tc.addChild(cpPrivate);
  tc.startup();
 
  changeTabWidth();
  
  function changeTabWidth(){
    // get the number of child of tabContainer
    var number_of_child = tc.containerNode.childElementCount;
    
    // calculate width of tabContainer and divide by number of child then 
    // every tab has 6px left and right padding + 1px border right so 
    // size must be 6+6+3-1 for the last tab = "14" that's why we remove 14 above from the width sum
    var width = (domStyle.get(tc.containerNode,"width")/number_of_child) - 14;
    
    query(".dijitTabInner.dijitTabContent.dijitTab").forEach(function(element){
      domStyle.set(element, {
        width: width+"px"
      });
    });
  }
  
  // event to change width after window size changed 
  On(window,"resize",function(){
  	changeTabWidth();
  })
  
});
代码语言:javascript
代码运行次数:0
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="tabContainer"></div>
</div>

如果你想要小提琴:小提琴

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39358049

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档