是否可以將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和TabController類子類化或擴展它們（通過dojo.extend || dojo.mixin ）來烘焙該功能。

另外，請注意，對於並非所有選項卡都適合一行的情況，我沒有測試這是否會破壞ScrollingTabController的功能。