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

Question

我想创建如图所示的menuList。

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

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

这是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：文件：/// C：！/Program%20Files/Mozilla%20Firefox/chrome/classic.jar /skin/classic/global/menu.css”

。

1. 如何使用CSS创建一个Iconic menulist？

获取menuItem值的第二个问题。正如我上面所说，我能够获取树单元格文本并将其附加到Menulist中的MenuItem。 我有大约8个Menulist，在用户决定选择值之后，我想获取这些值并将其附加到我的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的menuItem的值并将其更新为我的XML文件。

感谢您的帮助和支持。

Answer 1

首先，要创建带有图标的menuitem，只需将menuitem的类设置为包含'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>

您可能已经知道这一点，但是menulist提供了一个非常方便的方法，可以为您添加一个menuitem：

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）