是否可以将dijit.layout.TabContainer选项卡对齐？

Question

我希望标签向右浮动，而不是显示在内容窗格的右侧。这可能吗？

Answer 1

tabPosition属性没有此类选项（仅top，bottom，left-h和right-h），但您只需几行JavaScript为达到这个：

请参阅jsFiddle中的代码：http://jsfiddle.net/phusick/aGCFs/

我的第一个想法是覆盖dijit CSS以将标签与text-align:right对齐，但这不起作用，因为标签'domNodes是div的子项width超过50000px ，因此标签将不可见。要解决此问题，每次调整选项卡容器的大小时都应设置left属性（通过dojo.connect）：

var alignTabs = function(tabContainer) {
    var tabListNode = tabContainer.tablist.domNode;
    var tabStripNode = dojo.query("div.nowrapTabStrip", tabListNode)[0];   

    var tabListCoords = dojo.coords(tabListNode);
    var tabStripCoords = dojo.coords(tabStripNode);

    var tabStripLeft = (-tabStripCoords.w + tabListCoords.w) + "px";

    dojo.style(tabStripNode, "textAlign", "right");
    dojo.style(tabStripNode, "left", tabStripLeft);
}

var tabContainer1 = dijit.byId("tabContainer1");
alignTabs(tabContainer1);

dojo.connect(tabContainer1, "resize", function() {
    alignTabs(tabContainer1);            
});

肯定需要一些微调，但你有一个想法。由于这只是一个临时代码，我建议继承TabContainer＆amp; TabController类或扩展（通过dojo.extend || dojo.mixin）来烘焙该功能。

另外，请注意，对于并非所有选项卡都适合单行的情况，我没有测试这是否会破坏ScrollingTabController的功能。