CODEWITHSUNDEEP
javascriptcssxulmenuitem
linguini
linguini

Reputation: 1939

How to add CSS for dynamic MenuItems in MenuList and How to get the value of the MenuItem in XUL

I want to create menuList as displayed in the picture. enter image description here

https://developer.mozilla.org/En/XUL:menuitem#Examples When I checked in the Firefox website, it shows "Note: The menuitem must have a class of menuitem-iconic for the image to appear. "

In my case I'm loading the menuItems dynamically from the XUL tree(Getting the value of the XUL tree and append it in the MenuList).

This is the menuList:

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

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

The CSS file:

.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;
}

I found all these CSS code from the chrome directory of my Firefox browser: "jar:file:///C:/Program%20Files/Mozilla%20Firefox/chrome/classic.jar!/skin/classic/global/menu.css".

  1. How can i create a Iconic menulist using CSS?

My Second problem to get the value of the menuItem. As i said above, I'm able to get the tree cell text and append it to the MenuItem in the Menulist. I have around 8 Menulist and after the user decides to choose the values, then I want to get those values and append it to my XML file.

I'm trying in this way, but it's seems like this is not the proper way of doing becasue it's getting the value of the MenuItem from the MenuList.

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.How can i get the value of of my menuItems of menuList and update it to my XML file.

Thanks for your help and support.

Upvotes: 1

Views: 1004

Answers (1)

db48x
db48x

Reputation: 3178

First, to create a menuitem with an icon, just set the class of the menuitem to include 'menuitem-iconic'. You can do the same on the menu by including 'menu-iconic' in the class. For example:

<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>

You may already know this, but the menulist provides a very handy method that adds a menuitem for you:

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

(see https://developer.mozilla.org/en/XUL/menulist#m-menulist.appendItem)

Secondly, you can get the value of the selected menuitem by simply reading the value property of the menulist:

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

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

Upvotes: 2

Related Questions