lige noget helt andet, jeg har ikke kigget på din kode, men lavede engang noget htc menu værk det kan du da lige se på ;)
<PUBLIC:COMPONENT tagName="menu">
<PUBLIC:ATTACH event="onmousedown" onevent="" />
<PUBLIC:ATTACH event="onmouseup" onevent="" />
<PUBLIC:ATTACH event="ondocumentready" onevent="init()" />
<script type="text/javascript">
/**
* Menu
*
*/
function Menu() {
var items = new Array();
this.htmlref = null;
this.addMenuItem = function(menuitem) {
menuitem.ref = this;
items.push(menuitem)
}
this.removeMenuItem = function(index) {
items.splice(index, 1);
}
this.getItemAt = function(index) {
return items[index];
}
this.getItemsLength = function() {
return items.length;
}
this.toString = function() {
return "Menu [no of items: " + items.length + "]";
}
}
/**
* MenuItem
*/
function MenuItem(text,parent) {
var text = text;
this.type = "item";
this.submenu = null; // reference to submenu instance
this.parentItem = parent // parent = reference to HTML parent ITEM
this.disabled = false;
this.getText = function() {
return text;
}
this.getSubmenu =function ()
{
return this.submenu;
}
this.toString = function() {
return "MenuItem: " + text + "\nSubmenu: " + this.submenu;
}
}
</script>
<SCRIPT Language="Javascript">
// private members
var level = 0;
var menus = null;
var xmldom = null;
var docElem;
var hovered = new Array();
var hoveredtd = null;
var myoffsetx = 0;
var myoffsety = 0;
var myid = "";
function init()
{
/**
* Calculates ELEMENTS position relative to
* parent document.
*/
// set elem to element;
myid = element.getAttribute("id");
elem = element;
while(elem.parentNode != null) {
myoffsetx += elem.offsetLeft;
myoffsety += elem.offsetTop;
if(elem.scrollTop)
myoffsety = myoffsety - elem.scrollTop
elem = elem.parentNode;
}
// instantiates menus array
// contains Menu instances (linear)
menus = new Array();
// Instantiate xmldom
xmldom = new ActiveXObject("Microsoft.XMLDOM");
// load XML from customtags XML-dataisland
xmldom.loadXML(element.firstChild.outerHTML);
// get documentElement
docElem = xmldom.documentElement;
// reference to top menu instance
var top;
(top = createMenu(docElem.firstChild)).parent = null
// Setup basic HTML (layout of customtag)
var table = document.createElement("table");
table.style.border = "1px solid black";
table.border = 0;
//table.style.width = 120;
table.style.backgroundColor = "white";
table.style.fontFamily = "arial";
table.style.fontSize = "11px";
table.style.width = "100%";
table.cellPadding = 0;
table.cellSpacing = 0;
var tr = table.insertRow();
td = tr.insertCell();
innertable = document.createElement("TABLE");
innertable.style.border = 0;
innertable.cellPadding = 0;
innertable.cellSpacing = 0;
innertable.style.width = "100%";
//innertable.style.border = "1px solid black";
innertable.style.position = "relative";
innertable.style.fontSize = "11px";
innertr = innertable.insertRow();
innertd = innertr.insertCell();
innertd.innerHTML = " test";
innertd.style.width = "20px";
td.appendChild(innertable);//.innerHTML = "<table ><tr><td>MENU</td><td>>></td></tr></table>";
td = tr.insertCell();
td.style.width = "10px";
td.innerHTML = "<img src='img/bluDArrow.gif'>";
table.onclick = function() {
uhvr();
openSubMenu(top);
}
// Run renderMENU (0 = level)
renderMenu(top,0);
// append basic HTML to element (customtag)
element.appendChild(table);
}
function hvr(elm)
{
elm.firstChild.style.backgroundColor = "#ffaa00";
elm.firstChild.style.border = "1px solid black";
elm.firstChild.cellPadding = 0;
elm.firstChild.rows[0].cells[1].style.padding = "0px 0px 0px 2px";
hovered.push(elm); // hovered = global array
if(elm.jRef.parentItem)
{
hvr(elm.jRef.parentItem.htmlref)
}
return "hand";
}
function uhvr()
{
for(var i =0;i<hovered.length;i++)
{
hovered[i].h = false;
hovered[i].firstChild.style.backgroundColor = "transparent";
hovered[i].firstChild.style.border = "none";
hovered[i].firstChild.cellPadding = 1;
}
hovered = new Array();
return "pointer";
}
function updateOpen(elm)
{
var fundet = false;
for(var j=0;j<menus.length;j++)
{
for(var i=0;i<hovered.length;i++)
{
if(hovered[i].parentNode.parentNode.parentNode.menuref ==menus[j] )
{
// alert( hovered[i].parentNode.parentNode.parentNode.menuref + " / / " +menus[j])
fundet = true;
}
}
if(elm)
{
if(fundet &&elm.jRef )
{
if(elm.jRef.submenu)
{
if(!elm.jRef.submenu.isOpen)
open(elm.jRef.submenu.htmlref)
}
}
if(!fundet)
{
close(menus[j].htmlref)
}
}
}
}
function openSubMenu(menu) { // menu = instance of Menu
/**
* openSubMenu
* @params menu instance of Menu
*/
menu = (menu.reference == null) ? menu : menu.reference;
// htmlref = reference to table
if(!menu.htmlref.isOpen)
open(menu.htmlref);
else
close(menu.htmlref);
}
/**
* renderMENU
* Render the menues as HTML
* May be overridden in other menu types
*/
function renderMenu(menu,level) { // menu = menu instance
var table = document.createElement("table");
table.style.width = 120;
table.style.position = "absolute";
table.style.backgroundColor = "white";
table.style.border = "1px solid black";
table.style.display = "none";
table.style.fontFamily = "arial";
table.style.fontSize = "11px";
table.style.backgroundImage = "url('win-gfx/bg.gif')";
table.style.backgroundRepeat = "repeat-y";
table.border = 0;
table.cellPadding = 2;
table.cellSpacing = 0;
table.setAttribute("isOpen", false); // assign attribute on table
table.setAttribute("menuref", menu); // menuref = references menu instance
for(var i=0;i<menu.getItemsLength();i++) {
var hassub = null;
var item = null;
item = menu.getItemAt(i);
if((hassub = item.submenu) != null); // NB - NO ACTION OTHER THAN POPULATE hassub
(td = table.insertRow().insertCell());//.innerHTML = menu.getItemAt(i).getText();
var innerTable = document.createElement("table");
innerTable.border = 0;
innerTable.style.width = "100%";
innerTable.style.fontSize = "11px";
innerTable.cellPadding = 1;
var innerTr = innerTable.insertRow();
var innerTd;
if(item.type != "seperator") {
// HOVER implementation
innerTable.onmouseover = function() {
var td = this.parentNode;
hoveredtd = td;
window.event.cancelBubble = true;
if(td.reference) {
openSubMenu(td);
uhvr();
hvr(td)
updateOpen(td);
} else {
uhvr();
hvr(td)
updateOpen(td);
}
}
innerTd = innerTr.insertCell();
innerTd.style.width = "24px";
innerTd.innerHTML = "<img src='img/topm_ico_note_14x14.gif' />";
innerTd = innerTr.insertCell();
innerTd.innerHTML = menu.getItemAt(i).getText();
innerTd.noWrap = true;
} else {
innerTd = innerTr.insertCell();
innerTd.style.width = "24px";
innerTd = innerTr.insertCell();
//innerTd.style.textAlign="right"
//NO alingment on hr element :(
var hr = document.createElement("hr");
hr.style.height = "1px";
innerTd.appendChild(hr);
}
if(item.disabled == "true") {
innerTable.disabled = true;
}
td.appendChild(innerTable);
// Sets a reference on TD to MENUITEM instance
td.setAttribute("jRef", menu.getItemAt(i))
if( menu.getItemAt(i).getText() == innerTd.innerHTML) // NB innerTd
{
menu.getItemAt(i).htmlref = td;
}
td.onselectstart = function() {
return false;
}
if(hassub != null) {
//td.innerHTML += "[>>]";
td.setAttribute("reference", hassub);
innerTd = innerTr.insertCell();
innerTd.style.width = "5px";
innerTd.innerHTML = "<img src='img/rArrDark.gif' />";
// render menues relative to this
renderMenu(hassub,level+1);
} else {
/**
* THIS IS A TEST METHOD
*/
td.onclick = function() {
alert(this.parentNode.parentNode.parentNode.menuref.parent);
}
}
}
table.style.zIndex = level + 1; // sets zIndex on table - to prevent is from beeing invisible due to overlaying tables
menu.htmlref = table; // All MENU instances will get a reference to its HTML (circular reference)
element.appendChild(table);
return table;
}
/**
* (Factory) createMenu method
* Creates Menu instances from the XML
* Actually a kind of 'populateModel' method...
* adds the menues to the global 'menus' container
* return MENU instance
*/
function createMenu(node) {
var menu = new Menu();
for(var j=0;j<node.childNodes.length;j++) {
var n = node.childNodes[j]
var item = createItem(n.getAttribute("value"),arguments[1]);
item.type = n.getAttribute("type")
item.disabled = n.getAttribute("disabled");
if(node.childNodes[j].hasChildNodes()) {
(item.submenu = createMenu(node.childNodes[j].firstChild,item)).parent = item;
}
menu.addMenuItem(item);
}
menus.push(menu);
return menu;
}
/**
* (Factory) createItem method
* return MENUITEM instance
*
*/
function createItem(txt,parent)
{
return new MenuItem(txt,parent);
}
function calculatePosition(menu) {
var top;
if(menu.menuref.parent == null) { // the top
menu.style.right = 0; // NOTICE ** HARDCODED values ***
menu.style.top = top = 20;
// calculates difference to browsers bottom
calcDiff(menu, top);
} else {
menu.style.left = calculateOffsetX(menu);
menu.style.top = top = calculateOffsetY(menu);
// calculates difference to browsers bottom
calcDiff(menu, top);
}
}
/**
* calculates difference to browsers (BODY) bottom
*/
function calcDiff(menu, top) {
var diff = 0;
if(( diff = (window.document.body.clientHeight - (menu.offsetTop + menu.offsetHeight + myoffsety))) < 0) {
top = top + diff;
menu.style.top = top;
}
}
/**
* calculates MENU's relative left position to parent menu
* May need to be optimized
*/
function calculateOffsetX(elem) {
var x = 0;
x = (elem.menuref.parent.ref.htmlref.offsetLeft + elem.menuref.parent.ref.htmlref.offsetWidth);
if((x + elem.offsetWidth + myoffsetx) - window.document.body.clientWidth > 0) // must open to the left
x = (x - (elem.menuref.parent.ref.htmlref.offsetWidth + elem.offsetWidth)) + 2;
return x-1;
}
/**
* calculates MENU's relative top position to parent menu
* May need to be optimized
*/
function calculateOffsetY(elem) {
//var src = window.event.srcElement;
var src = hoveredtd; // hoveredtd = global TD
var y = 0;
if(src.tagName == "TD")
{
y = (src.offsetTop + src.parentNode.parentNode.parentNode.offsetTop);
}
return y-1;
}
/**
* Open menu
*/
function open(menu) { // menu = table element
menu.style.display = "";
menu.isOpen = true;
calculatePosition(menu);
}
/**
* Close Menu
*/
function close(menu) { // menu = table element
if(menu == null)
return;
menu.style.display = "none";
menu.isOpen = false;
for(var i=0;i<menu.menuref.getItemsLength();i++) {
if(menu.menuref.getItemAt(i).submenu != null) {
close(menu.menuref.getItemAt(i).submenu.htmlref);
}
}
}
</SCRIPT>
</PUBLIC:COMPONENT>
