Avatar billede elskermad.dk Nybegynder
12. juni 2006 - 09:55 Der er 2 kommentarer og
1 løsning

Min javascript menu folder sig ikke ordenligt sammen

Hej Eksperter!

Jeg har bikset en lille menu sammen (http://telesikring.alvision.dk) men har problemer med 3. niveau.

Hvis I vælger første menupunkt og derinde nummer 2 (EDB -> Netværk) så kommer niveau frem. Hvis man hurtigt forlader denne del, eller går ind og tager et 1. niveaupunkt igen, så folder den sig ikke rigtigt sammen... Lige så snart man vælger EDB igen kan man se punkterne fra niveau 3, dog uden teksten...
Lidt svært at forklare, vist lettere at I selv lige kigger på siden :)

Hvad kan jeg gøre ved det? Ser lidt ufedt ud... :S

Jeg er godt klar over at menuen måske ikke er bygget alt for smart op, men var lige det jeg kunne få lavet når den skulle være multilevelfunktionsdygtig :P

På forhånd tak!
Avatar billede spaceus Nybegynder
12. juni 2006 - 13:33 #1
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 = "&nbsp;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>
Avatar billede elskermad.dk Nybegynder
12. juni 2006 - 14:06 #2
det var ikke helt det jeg søgte da jeg sådan set har en færdig menu bortset fra den bug! men ellers tak for inputtet ;)
Avatar billede elskermad.dk Nybegynder
19. juni 2006 - 11:17 #3
øv bøv...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester