[DHTML/JS] Treemenu met optionele dynamische opties

[Verwijderd]

Hallo
Ik heb een treemenu gemaakt met <ul> en <li>'s. Dit werkt opzicht nu vrij goed.

Alleen staan alle event hard in de html:

code:

<li onclick="" onmouseover="" onmouseout="">..</li>

Hier wil ik eigenlijk vanaf, omdat dit nog al een lap code wordt en het niet echt duilijk meer is.

In een aantal voorbeelden heb ik gezien dat op de onload van de container alle eventa worden gekoppeld aan de <li>'s. Dit kan ik dus ook wel doen.
Maar ik wil dan ook bepaalde dingen kunnen instellen. Zoals bijvoorbeeld een mouseover plaatje, maar dat is dan niet verplicht.

Mijn idee:
In de html staat:

code:

<div onload="init('mijnMenu');">
<ul>
<li>xxx
  <ul>
  <li>...</li>
  <li>...</li>
  </ul>
<li>...</li>
</ul>
</div>

Elke li heeft een id en een class.

Naast deze tree ga ik dan ook een lijst van propertyobjecten bijhouden in javascrpt, met daarin alle mogelijke eventchanges.
Op de onload van de container worden alle events gekoppeld aan de <li>. In de event wordt gekeken over een propertyobject is voor de <li> en zoja dan past die die toe.

code:

// in het js object de velden:
normalClass
hoverClass
clickClass
// zo ook images
// maar ze kunnen ook leeg zijn

Maar...
... dan kom ik met de vraag. Kan ik dan niet net zo goed hele menu via DOM aanmaken. Maar dat heeft weinig meer waarde.

Het is maar een idee. Ik wil graag weten hoe jullie het zouden doen.

[Clay]

Je hoeft iig niet voor elke node events te gaan zetten. click en mouseover/out events fire'en voor elke node binnen een parent met die events, dus je hoeft ze alleen op de buitenste ul te zetten. Door een beetje door de dom te lopen kan je dan prima de node vinden die je zocht, bv:

Java:

//script
window.onload = function() {
    var tree = document.getElementById('tree');
    addEventListener(tree, 'mouseover', hoverTree);
}

function hoverTree(e) {
    var node = e.target || e.srcElement;
    while(node && !/^li$/i.test(node.nodeName)) {
        node = node.parentNode;
    }

    window.status = node.innerHTML; // ff wat zien
}

function addEventListener(node, type, handler) {
    try {
        node.addEventListener(type, handler, false);
    } catch(inferiorBrowserException) {
        node.attachEvent('on'+type, handler);
    }
}

met

code:

<ul id="tree">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
    <li><a href="#">test 4</a></li>
</ul>

idem voor clicks dus.

Grotere tree's lenen zich ook bij uitstek voor een ajax aanpak, dus niet de hele tree als html in je source zetten, maar een branch pas inladen als die aangeklikt is.

Elke li heeft een id en een class.

hoeft dan ook niet

[Verwijderd]

hmmm toch eens even naar kijken

Wel handig dat event op alle items fire'en.

Maar ik "moet" dan nog wel optionele en extra "changes" gaan bij houden per item (als ze er zijn).
Anders weet ik niet welke plaatje ik moet veranderen bij een mouseover.

Kan ik eigenlijk ook een eigen attribuut toevoegen? Zoals imageOver="over.gif"?