如何在 Javascript 中創建標簽面板 (xul)

Question

我開發了一個 Firefox 擴展，我嘗試在標簽框 (xul) 中添加一個標簽面板。

選項卡框：

<tabbox id="tbDashboard" selectedIndex="0" >
        <tabs><!-- list of tabs -->
            <tab label="Overview"/> <!-- default tab -->
            <tab label="test"/>
        </tabs>

        <tabpanels><!-- list of contents -->
            <tabpanel ><!-- default tab's content -->
                <box orient="horizontal" flex="1">
                    <description style="font-size: 24pt;">overview</description>
                </box>
            </tabpanel>
            <tabpanel ><!-- test tab's content -->
                <box orient="horizontal" flex="1">
                    <description style="font-size: 24pt;">test</description>
                </box>
            </tabpanel>
        </tabpanel>
    </tabpanels>
</tabbox>

我可以在 JS 中添加一個新選項卡：

document.getElementById("tbDashboard")["tabs"].appendItem("popo");

出現標簽但標簽頁為空，我嘗試：

1. 使用帶有第二個參數的 appendItem => 不起作用
2. document.getElementById("tbDashboard")["tabpanels"].appendItem(...) => 失敗

有人有創建標簽頁（標簽面板）的想法嗎？

謝謝

Answer 1

tabs.appendItem()只是創建tab元素的便捷助手。 它與以下內容基本相同：

var tabbox = document.getElementById("tbDashboard");
var tab = document.createElement("tab");
tab.textContent = "popo";
tabbox.tabs.appendChild(tab);

您可以以相同的方式創建和添加一個tabpanel元素（這里只有一個文本框作為內容）：

var panel = document.createElement("tabpanel");
panel.appendChild(document.createElement("textbox"));
tabbox.tabpanels.appendChild(panel);

有關 DOM 操作的教程，請參閱https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface 。

Answer 2

您需要使用 DOM API 和 append 創建面板到您的 XUL 文檔，例如：

let newPanel = document.createElement("tabpanel");
let panelContent = document.createElement("hbox");
// Add more content here
newPanel.appendChild(panelContent);
document.getElementById("tbDashboard").tabPanels.appendChild(newPanel);