![](/img/trans.png)
[英]How to create a drop down list on the Mozilla web browser using XUL and Javascript?
[英]How to create a tabpanel (xul) in Javascript
我开发了一个 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");
出现标签但标签页为空,我尝试:
有人有创建标签页(标签面板)的想法吗?
谢谢
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 。
您需要使用 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.