[HTML+CSS+JS] UL tree LI's selecteren - Softwareontwikkeling

maandag 1 augustus 2005 16:36

Acties:

W3designer.nl

Topicstarter

Ik wil graag in HTML een tree list maken, zoals bijvoorbeeld die van Windows verkenner. Ik maak gebruik van geneste unordered lists in html zoals:

Ik kan de lijsten al in en uitvouwen door gebruik te maken van stylesheets in combinatie met javascript. Dit gaat probleem loos.

Maar nu wil ik graag het listitem wat wordt aangeklikt blauw maken. Hiervan verander ik de class van het listitem.

HTML:

1
2
3

<ul>
  <li><a onclick="searchParentTag(this, 'LI').className = 'high';"> klik </a></li>
</ul>

Nu wil ik ervoor zorgen dat de eerder geselecteerde items allemaal weer een witte achtergrond hebben. Ik zoek de hoogste ul list op en ga alle listitems af stel de class in. Nu wil ik bekijken of deze listitems nog weer unorderedlist in zich heeft, maar dit krijg ik niet voor elkaar.

Hoe kan ik mbv javascript na gaan of er nog een <UL> list onder een listitem zit. Als ik dit heb, kan ik listitems selecteren zonder dat alles op een gegeven moment blauw is geselecteerd.

JavaScript:

function highlight(el) {
    // Eerst ul tag zoeken
    ul = searchParentTag(el, 'UL')

    // Hoogste unordered list zoeken
    while (ul.parentNode.parentNode.tagName == 'UL') {
        ul = ul.parentNode.parentNode;
    }

    // Van de hoogste list de achtergron weer resetten
    resetHighlight(ul);

    // Row selecteren
    li = searchParentTag(el, 'LI')
    li.className = 'high'
}

function resetHighlight(ul) {
    var i = 0;

    // Alle listitems af gaan
    while(i < ul.childNodes.length) {
        // Message weergeven alleen voor het debuggen
        alert (ul.childNodes[i].nodeName);

        // Class weer resetten
        ul.childNodes[i].className = 'high'

        // Hier moet ik van de listitems controleren of er ul list inzit
        // resetHighlight(ul.childNodes[i])

        // Ophogen
        i ++;
    }
}

Alvast bedankt voor jullie medewerking!!!

Oeps kan iemand mijn topic verplaatsen naar Webdesign & Graphics?

[ Voor 12% gewijzigd door DarkSilence op 01-08-2005 16:37 ]

W3designer.nl

maandag 1 augustus 2005 16:39

Acties:

Verwijderd

Ondanks het feit dat je hier helemaal verkeerd zit en dat de buren je maar wat graag verwelkomen met deze vragen;

Je kunt dit uiterst simpel oplossen door op te slaan welk item je hebt geselecteerd. Als je dan op een ander item klikt (en dat item blauw maakt) dan kun je op een gemakkelijke wijze (door te refereren naar het object dat je hebt opgeslagen als huidig-geselecteerd-object bijvoorbeeld) het vorige item weer de originele stijl meegeven, al dan niet door van classname te wijzigen (iets wat overigens vrij intensief is - je kunt i.m.o. beter de achtergrondkleur wijzigen van je object).

maandag 1 augustus 2005 16:43

Acties:

Verwijderd

Je kunt toch gewoon alle ul-tags opvragen door ul.getElementsByTagName('ul') te gebruiken?

Daar zet je een loopje op die voor elk gevonden element de resetHighlight weer aanroept.

JavaScript:

1
2
3

for (var x=0;x<ul.getElementsByTagName('ul').length;x++) {
    resetHighlight(ul.getElementsByTagName('ul')[x])
}

[ Voor 8% gewijzigd door Verwijderd op 01-08-2005 16:43 ]

maandag 1 augustus 2005 16:49

Acties:

Verwijderd

Verwijderd schreef op maandag 01 augustus 2005 @ 16:43:
Je kunt toch gewoon alle ul-tags opvragen door ul.getElementsByTagName('ul') te gebruiken?

Daar zet je een loopje op die voor elk gevonden element de resetHighlight weer aanroept.
JavaScript:
1
2
3
for (var x=0;x<ul.getElementsByTagName('ul').length;x++) {
    resetHighlight(ul.getElementsByTagName('ul')[x])
}

Niet best als je dat doet terwijl het niet nodig is. Je zult maar 200 nodes hebben?
Zie deze code; kijk er eens goed naar en je snapt de bedoeling.

code:

<html>
<head>
<style>

div.vierkant
{
float: left;
margin-right: 1px;
background-color: lightblue;
width: 100px;
height: 100px;
cursor: pointer;
}

</style>
<script>

// store current selected object
// , by default empty
var currentObj = null;

function changeMe(newSelectedObj)
{

    // give old object default color (?)
    if(currentObj != null) {
        currentObj.style.backgroundColor = 'lightblue'; }
    
    // change bgColor
    newSelectedObj.style.backgroundColor = 'blue';

    // store new object for next functioncall
    currentObj = newSelectedObj;

}

</script>
</head>
<body>

<div class="vierkant" onClick="changeMe(this)"></div>
<div class="vierkant" onClick="changeMe(this)"></div>
<div class="vierkant" onClick="changeMe(this)"></div>

</body>

[ Voor 12% gewijzigd door Verwijderd op 01-08-2005 16:49 ]

maandag 1 augustus 2005 16:52

Acties:

NMe

Quia Ego Sic Dico.

DarkSilence schreef op maandag 01 augustus 2005 @ 16:36:
Oeps kan iemand mijn topic verplaatsen naar Webdesign & Graphics?

Kun je dat de volgende keer even met een topic report vragen?

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 1 augustus 2005 17:16

Acties:

DarkSilence

W3designer.nl

Topicstarter

Verwijderd schreef op maandag 01 augustus 2005 @ 16:39:
Ondanks het feit dat je hier helemaal verkeerd zit en dat de buren je maar wat graag verwelkomen met deze vragen;

Je kunt dit uiterst simpel oplossen door op te slaan welk item je hebt geselecteerd. Als je dan op een ander item klikt (en dat item blauw maakt) dan kun je op een gemakkelijke wijze (door te refereren naar het object dat je hebt opgeslagen als huidig-geselecteerd-object bijvoorbeeld) het vorige item weer de originele stijl meegeven, al dan niet door van classname te wijzigen (iets wat overigens vrij intensief is - je kunt i.m.o. beter de achtergrondkleur wijzigen van je object).

Ik sla nu de referentie op dat is gewoon het simpelst. Dat ik zelf zo moeilijk zat te denken. Bedankt voor jullie tips!

W3designer.nl