javascript - 是否可以将 dijit.layout.TabContainer 选项卡向右对齐？

Question

我希望选项卡向右浮动，而不是出现在内容 Pane 的右侧。这可能吗？

Answer 1

tabPosition 属性没有这样的选项(只有 top、bottom、left-h 和 right-h)，但您只需要几行 JavaScript 即可实现此目的:

查看 jsFiddle 上的实际代码:http://jsfiddle.net/phusick/aGCFs/

我的第一个想法是重写 dijit CSS 以将选项卡与 text-align:right 对齐，但这行不通，因为选项卡的 domNode 是 div 的子级> 其中宽度超过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 和 TabController 类或扩展(通过 dojo.extend || dojo .mixin)它们来烘焙该功能。

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