如何为 MenuList 中的动态 MenuItem 添加 CSS 以及如何在 XUL 中获取 MenuItem 的值

Question

我想创建如图所示的菜单列表。

https://developer.mozilla.org/En/XUL:menuitem#Examples 当我检查 Firefox 网站时，它显示 “注意：menitem 必须有一个 menuitem-iconic 类才能显示图像。”

在我的例子中，我从 XUL 树动态加载 menuItems（获取 XUL 树的值并将其附加到 MenuList 中）。

这是菜单列表：

<menulist id="firstname">
    <menupopup >    
    </menupopup>
    </menulist>

<menulist id="laastname">
    <menupopup>         
    </menupopup>
    </menulist> 

CSS 文件：

.menu-iconic-left {
  min-width: 1.45em;
}

.menu-iconic-icon {
  width: 16px;
  height: 16px;
}

menu.menu-iconic > .menu-iconic-left,
menuitem.menuitem-iconic > .menu-iconic-left {
  -moz-appearance: menuimage;
  padding-top: 2px;
}

我从 Firefox 浏览器的 chrome 目录中找到了所有这些 CSS 代码： “jar:file:///C:/Program%20Files/Mozilla%20Firefox/chrome/classic.jar!/skin/classic/global/menu.css”。

1. 如何使用 CSS 创建标志性菜单列表？

我的第二个问题是获取菜单项的值。正如我上面所说，我能够获取树单元格文本并将其附加到菜单列表中的菜单项。 我有大约 8 个菜单列表，在用户决定选择值后，我想获取这些值并将其附加到我的 XML 文件中。

我正在尝试这种方式，但似乎这不是正确的方法，因为它从 MenuList 获取 MenuItem 的值。

function mer()
{
alert('one' ); //This aler is working.

var src = "\n\<CONTACT>\n\
\<FirstName>"+document.getElementById("firstname").value+"</FirstName>\n\   //the id of the menulist.
\<LastName>"+document.getElementById("laastname").value+"</LastName>\n\     //the id of the seconf menulist.
\</CONTACT>\n";

alert('one' );  //This alert is not working.

var node = srcToNode(src);
alert(node);
    if (objXMLDoc.childNodes && objXMLDoc.childNodes.length) {
        for (var i = 0; i < objXMLDoc.childNodes.length; ++i) {
    if (objXMLDoc.childNodes.item(i).childNodes && objXMLDoc.childNodes.item(i).childNodes.length) {
         var x = objXMLDoc.childNodes.item(i).childNodes.length;
        var lastNode = objXMLDoc.childNodes.item(i).childNodes.item(x-2); } } }
objXMLDoc.appendChild(node);
var textNode = document.createTextNode("\n");
objXMLDoc.appendChild(textNode);

var textNode1 = document.createTextNode("\n");
objXMLDoc.appendChild(textNode1);

var serializer = new XMLSerializer();
var prettyString = serializer.serializeToString(objXMLDoc);
prettyString = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" + prettyString;
//saveFile(prettyString, "C:\\merge.xml");
alert('Merge is done');
document.getElementById('group').setAttribute("hidden", "true");

} 

function srcToNode(src) {
    var domObject = (new DOMParser()).parseFromString(src, "text/xml");
    return domObject.documentElement;
} 

2.我如何获取menuList 的menuItems 的值并将其更新到我的XML 文件。

感谢您的帮助和支持。

Answer 1

首先，要创建带有图标的菜单项，只需将菜单项的类设置为包含“menuitem-iconic”即可。您可以通过在类中包含“menu-iconic”来在菜单上执行相同的操作。例如：

<menulist id="metasyntactic" class="menu-iconic">
  <menupopup>
    <menuitem class="menuitem-iconic" value="foo">Foo</menuitem>
    <menuitem class="menuitem-iconic" value="bar">Bar</menuitem>
    <menuitem class="menuitem-iconic" value="baz">Baz</menuitem>
  </menupopup>
</menulist>

您可能已经知道这一点，但是菜单列表提供了一种非常方便的方法，可以为您添加菜单项：（

document.getElementById("metasyntactic").appendItem("Zed", "zed");

请参阅https://developer.mozilla.org/en/XUL/menulist#m-menulist.appendItem)

其次，可以获取选中的menuitem的值通过简单地读取菜单列表的 value 属性：（

var selectedValue = document.getElementById("metasyntactic").value;

参见 https://developer.mozilla .org/en/XUL/menulist#a-value)