nicht angemeldet
Also das hat mich jetzt gereizt... ;-)
<ul>
<li class="termin">
<a href="#" onclick="return aufzu(this)" title="für Details anklicken...">04.04.2008 - Termin X</a>
<ul class="zu">
<li>Beginn 15 Uhr</li>
<li>Ort: Berlin</li>
</ul>
</li>
Ich habe den HTML-Code noch weiter vereinfacht. Die Klasse "auf" oder "zu" muss ja überhaupt nicht sein! Es reicht doch, wenn man diese Klasse erst vergibt, wenn man auf den passenden Link klickt! Daher habe ich sie auch in "details" umbenannt. Nur wenn eine <ul> die Klasse "details" hat, wird sie angezeigt.
Ebenso kann man den Titel per Javascript vergeben... was dann zu der generellen Überlegung führen muss, dass man alles, was mit Javascript zu tun hat, eben mit Javascript erst "einbaut". Die ganzen onclick-Events müssen ja nicht im HTML-Code stehen! Also setzt man sie mit Javascript. Das ist dann "unobtrusive JavaScript".
Damit sieht eine funktionierende Seite so aus:
[code lang=html]<html>
<head>
<title>Test</title>
<script type="text/javascript">
// <![CDATA[
~~~javascript
TermineSchalter = {
aktualisieren : function () {
var jetzt = new Date();
var jahr = jetzt.getFullYear();
var monat = jetzt.getMonth()+1;
var tag = jetzt.getDate();
var termine = this.getElementsByClassName("termin");
var heute = tag + 100*monat + 10000*jahr;
var a, i, j, aktuell;
for (i = 0; i < termine.length; i++) {
a = termine[i].getElementsByTagName("a");
if (a.length > 0) {
a[0].title = "Für Details hier klicken!";
a[0].onclick = function () {
return TermineSchalter.aufzu(this)
};
aktuell = a[0].innerHTML.replace(/^.*(\d+\.\d+\.\d+).*$/g, "$1").split(/\./);
for (j = 0; j < 3; j++) {
aktuell[i] = parseFloat(aktuell[i]);
}
aktuell = aktuell[0] + 100*aktuell[1] + 10000*aktuell[2];
if (aktuell < heute) {
termine[i].className = "termin-vorbei";
}
}
}
},
aufzu : function (elm) {
if (elm) {
var li = elm.parentNode;
var ul = li.getElementsByTagName("ul");
if (ul.length > 0) {
ul[0].className = ul[0].className == "details" ? "" : "details";
}
}
return false;
},
getElementsByClassName : function (className, element) {
element = element ? element : document;
var muster = new RegExp("(^|\\s)" + className + "(\\s|$)");
var alles = element.getElementsByTagName("*");
var gefunden = new Array();
var i;
for (i = 0; i < alles.length; i++) {
if (alles[i] && alles[i].className && alles[i].className != "") {
if (alles[i].className.match(muster))
gefunden[gefunden.length] = alles[i];
}
}
return gefunden;
},
init : function () {
TermineSchalter.oldWinOnLoad = window.onload;
window.onload = function () {
if (typeof(TermineSchalter.oldWinOnLoad) == "function") {
TermineSchalter.oldWinOnLoad();
}
TermineSchalter.aktualisieren();
};
}
};
TermineSchalter.init();
// ]]>
</script>
<style type="text/css">
.termin { border: 1px solid red; margin: 10px;}
.termin ul { display: none; }
.termin-vorbei { display: none; }
.termin .details { display: block; }
</style>
</head>
<body>
<h1>Anstehende Termine</h1>
<ul>
<li class="termin">
<a href="#">04.02.2008 - Termin A</a>
<ul>
<li>Beginn 19 Uhr</li>
<li>Ort: Frankfurt</li>
</ul>
</li>
<li class="termin">
<a href="#">04.04.2008 - Termin X</a>
<ul>
<li>Beginn 15 Uhr</li>
<li>Ort: Berlin</li>
</ul>
</li>
<li class="termin">
<a href="#">05.04.2008 - Termin Y</a>
<ul>
<li>Beginn 9.30 Uhr</li>
<li>Ort: Hamburg</li>
</ul>
</li>
</ul>
</body>
</html>
Es bleibt noch anzumerken, dass der JavaScript-Code in eine externe Datei gehört, ebenso das CSS. Ansonsten viel Spaß!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)