javascript - 如何为菜单列表中的动态菜单项添加 CSS 以及如何在 XUL 中获取 MenuItem 的值

Question

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

https://developer.mozilla.org/En/XUL:menuitem#Examples当我在 Firefox 网站上查看时，它显示"注意:菜单项必须具有 menuitem-iconic 类才能显示图像。"

在我的例子中，我从 XUL 树中动态加载菜单项(获取 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 创建 Iconic 菜单列表？

我的第二个问题是获取 menuItem 的值。正如我上面所说，我能够获取树单元格文本并将其附加到菜单列表中的 MenuItem。我有大约 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)

其次，你可以通过简单的读取menulist的value属性来获取选中的menuitem的值:

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

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