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

回答

相關問題