Pff. Programmeren, hoe eenvoudig de taak ook, is echt wel niet gemakkelijk te doen in een drukke omgeving.
Ik was donderdag een doodsimpel iets aan het proberen doen: een generische, propere manier om ervoor te zorgen dat men op een titeltje kon klikken, en dat daar dan één of meer paragrafen onder zouden tevoorschijn komen. En als die paragrafen er al staan, dat ze verdwijnen.
Doodeenvoudig, jawel. Ik kan zó een paar manieren bedenken, van bijzonder lelijk (met een onclick op een ding met allemaal expliciete IDs) tot relatief proper (met een DOM-ding in een onLoad). Maar dat zouden allemaal eigen brouwsels zijn: mijn laatste javascript is van vóór de tijd dat er allemaal degelijke frameworks en dingen waren.
En voor dit project had ik besloten om YUI te gebruiken, dus het moest en het zou daarmee gebeuren.
En dus zat ik op die library te kijken. En telkens ik een zekere mate van concentratie had bereikt: telefoon. Of e-mail. Of “mag ik even storen?”
Mag ik even storen? Eigenlijk: wat voor vraag is dat? De vraag stellen is ze toch al beantwoorden—mag ik u even uit de concentratie halen waar gij u de afgelopen vijftien minuten moeizaam ingewerkt hebt, en dan blijven staan tot ik een antwoord krijg?
Afijn. Geen erg, natuurlijk, want uiteindelijk was het niet mijn taak om daar op dat moment een future-proof generisch mechanisme uit te werken dat ook door leken gebruikt kon worden: ik moest gewoon iets klaar hebben dat in een gebruikerstest kon doen alsof het werkte.
Wat ik dan ook maar gedaan heb, met een snelle hack.
Tot ik vanmorgen een gaatje had, en ik eigenlijk nog eens wou kijken. Par acquit de conscience, als het ware. Ha. Geen tien minuten heeft het geduurd. ‘t Is nog altijd niet ideaal, maar het doet zijn ding tegenwoordig wel met YUI.
De html ziet er zo uit:
<div class="toggle">
<h3 class="clicktoggle">Lorem ipsum dolor</h3>
<p class="hidden">Sit amet, consectetuer adipiscing elit. </p>
</div>
En dan steek ik alle dingen met class clicktoggle in de div met id yui-content in een array:
var toggles=YAHOO.util.Dom.getElementsByClassName("clicktoggle", "", document.getElementById("yui-content"));
…en dan zet ik daar een listener op click op:
YAHOO.util.Event.addListener(toggles, "click", toggleDiv);
…en in die toggleDiv zoek ik alle dingen met class hidden van de parent van het geklikte ding (YAHOO.util.Event.getTarget(e).parentNode), en dan is het gewoon maar kijken of daarvan display op hidden staat of niet: quick and dirty
if (YAHOO.util.Dom.getStyle(toToggle,"display")=="block") {
YAHOO.util.Dom.setStyle(toToggle,"display","none");
} else {
YAHOO.util.Dom.setStyle(toToggle,"display","block");
}
Joy. Schoon gerief, YUI.
Reacties
8 reacties op “DOM”
We zijn hier ook 100% fan van YUI.
YUI is inderdaad een handig framework, maar het ik vind het wat zwaar uitvallen voor wat ik doorgaans nodig heb (geen tabs of andere widgets). Daarom: JQuery.
Dat tonen en verbergen bijvoorbeeld, dat is op te lossen met iets als dit:
$(document).ready(function(){
$('.clicktoggle').bind('click', function (evt) {
$(evt.target).siblings('.hidden').toggle();
});
});
Javascript frameworks… ‘t begint stilaan te lijken op Windows vs Linux vs OS X. 🙂
Als het enkel over lichtgewicht effectjes gaat, dan grijp ik ook liever naar zoiets als JQuery ipv. YUI!, maar YUI! heeft uiteraard ook zijn verdienste, geen kwaad woord daarover 🙂
YUI is nuttig als je echt widgets enzo nodig hebt. Voor een taak als deze, JQuery all the way, inderdaad met code zoals Kevin postte. JQuery is gewoonweg zalig in gebruik, zowel client-only als voor AJAX-request handling enzo.
Zelf gebruik ik altijd Prototype in combinatie met script.aculo.us. Doet zijn werk perfect. Maar eigenlijk ben ik niet zo’n grote JavaScript kenner. Ben trouwens pas begonnen met het hele JavaScript-gebeuren 😉 .
Voor dergelijke lightweight stuff kan ik JQuery eveneens ten zeerste aanraden. Bovendien zijn er ook al een hoop plugins beschikbaar die soms wel de moeite waard zijn en is ‘t nog goed gedocumenteerd ook!
Akkoord als het alleen light stuff is. ‘t Zal niet alleen dat zijn, maar vooral: het is heet erg fijn dat de layout en zo ook allemaal in één ding zit.
Ik heb YUI nog niet echt in-depth bestudeerd, maar wat me opvalt is het functiegebaseerde karakter: in je voorbeeldcode doe je iets als
var x = getObject("foo"); if(getStyle(x, "bar") == "baz") blabla;In JQuery is dit meer “object” gebaseerd:
var x = $("#foo"); if(x.css("bar") == "baz") blabla;Of direct genest:
if($("#foo").css("bar") == "baz") blabla;De JQuery manier vind ik dan toch net iets netter dan de YUI functies…
CSS-style selectors (en indien nodig soms ook XPath-achtige) zijn ook wel super om mee te werken.