是否可以将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，所以选项卡将不可见。为了解决这个问题，你应该每个选项卡容器（通过dojo.connect）调整时设置left属性，以及：

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 & TabController类或扩展（通过dojo.extend || dojo.mixin）他们烤的功能。

而且，请注意，我没有测试这是否确实还是不会破坏ScrollingTabController的功能，但并非所有选项卡都适合单个行。