dijit中的垂直文本TabContainer标签

dijit/layout/TabContainer可能在顶部，右侧，底部和左侧显示标签按钮/文本。我想要在右侧获得标签（使用tabPosition：“right-h”），但即使标签在右侧，文本仍然水平显示。 “right-h”听起来好像有一个“right-v”的计划，也有垂直显示的文本，但是这似乎还没有实现。dijit中的垂直文本TabContainer标签

如何实现在我的页面中使用的TabContainers之一中的标签文本的垂直显示（其他人应该在水平渲染的文本顶部具有标签）。

谢谢！

来源

2016-08-24 thomas

我可以想象的一种方法是将制表符accros的标题分成多行。

像这样：

require([ 
 
    "dojo/dom-attr", "dojo/query", 
 
    "dijit/layout/TabContainer", "dijit/layout/ContentPane", 
 
    "dojo/domReady!" 
 
], function(attr, query, TabContainer, ContentPane){ 
 

 
    query(".tc1cp").forEach(function(n){ 
 
     new ContentPane({ 
 
      // just pass a title: attribute, this, we're stealing from the node 
 
      title: attr.get(n, "title").split('').join('<br />') 
 
     }, n); 
 
    }); 
 
    var tc = new TabContainer({ 
 
     style: attr.get("tc1-prog", "style"), 
 
     tabPosition: 'left-h' 
 
    }, "tc1-prog"); 
 
    tc.startup(); 
 
});

.tabLabel { 
 
    line-height: 1; 
 
    text-align: center; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> 
 

 
<div class="tundra"> 
 
    <div id="tc1-prog" style="width: 400px; height: 500px;"> 
 
    <div class="tc1cp" title="My first tab"> 
 
     Lorem ipsum and all around... 
 
    </div> 
 
    <div class="tc1cp" title="My second tab"> 
 
     Lorem ipsum and all around - second... 
 
    </div> 
 
    <div class="tc1cp" title="My last tab"> 
 
     Lorem ipsum and all around - last... 
 
    </div> 
 
    </div> 
 
</div>

或改变writing-mode：

require([ 
 
    "dojo/dom-attr", "dojo/query", 
 
    "dijit/layout/TabContainer", "dijit/layout/ContentPane", 
 
    "dojo/domReady!" 
 
], function(attr, query, TabContainer, ContentPane){ 
 

 
    query(".tc1cp").forEach(function(n){ 
 
     new ContentPane({ 
 
      // just pass a title: attribute, this, we're stealing from the node 
 
      title: attr.get(n, "title") 
 
     }, n); 
 
    }); 
 
    var tc = new TabContainer({ 
 
     style: attr.get("tc1-prog", "style"), 
 
     tabPosition: 'left-h' 
 
    }, "tc1-prog"); 
 
    tc.startup(); 
 
});

.tabLabel { 
 
    writing-mode: tb-rl; /*Note: correct value is vertical-lr but IE10 does not support it*/ 
 
    -ms-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> 
 

 
<div class="tundra"> 
 
    <div id="tc1-prog" style="width: 400px; height: 500px;"> 
 
    <div class="tc1cp" title="My first tab"> 
 
     Lorem ipsum and all around... 
 
    </div> 
 
    <div class="tc1cp" title="My second tab"> 
 
     Lorem ipsum and all around - second... 
 
    </div> 
 
    <div class="tc1cp" title="My last tab"> 
 
     Lorem ipsum and all around - last... 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-08-24 07:14:23 ben

dijit中的垂直文本TabContainer标签

回答

相关问题