Felix Riesterer: Zwei Scripts zu einem?

Beitrag lesen

War wohl gestern abend zu müde...

Die letzte Version war nix für Leute ohne Javascript, denn die haben keine Details sehen können, da diese ja standardmäßig unterdrückt wurden! Daher habe ich das jetzt dahingehend korrigiert. Dabei habe ich auch die Links entfernt, denn diese haben ja kein sinnvolles Verweisziel und brauchen von daher überhaupt keine Links zu sein!

<html>  
    <head>  
        <title>Test</title>  
        <script type="text/javascript">  
        // <![CDATA[
        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 spans, i, j, aktuell, uls;  
  
                for (i = 0; i < termine.length; i++) {  
                    spans = this.getElementsByClassName("datum", termine[i]);  
                    if (spans.length > 0) {  
                        spans[0].title = "Für Details hier klicken!";  
                        spans[0].style.cursor = "pointer";  
                        spans[0].onclick = function () {  
                            return TermineSchalter.aufzu(this)  
                        };  
  
                        aktuell = spans[0].innerHTML.replace(/^.*(\d+\.\d+\.\d+).*$/g, "$1").split(/\./);  
                        aktuell = parseFloat(aktuell[0]) + 100*parseFloat(aktuell[1]) + 10000*parseFloat(aktuell[2]);  
  
                        // Datumsvergleich: JJJJMMTT, z.B. 20080401 für 1.4.2008  
                        if (aktuell < heute) {  
                            termine[i].className = "termin-vorbei";  
                        } else {  
                            // Details verstecken  
                            uls = termine[i].getElementsByTagName("ul");  
                            if (uls.length > 0) {  
                                uls[0].style.display = "none";  
                            }  
                        }  
                    }  
                }  
            },  
  
            aufzu : function (elm) {  
                // elm ist ein <span> in einem <li>, gesucht wird <ul> in diesem <li>  
                if (elm) {  
                    var li = elm.parentNode;  
                    var ul = li.getElementsByTagName("ul");  
                    if (ul.length > 0) {  
                        ul[0].style.display = ul[0].style.display == "none" ? "" : "none";  
                    }  
                }  
                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 () {  
                // das hier ersetzt <body onload="irgendwas">  
                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 .datum { font-weight: bold; text-decoration: underline; }  
            .termin-vorbei { display: none; }
        </style>  
    </head>  
    <body>  
        <h1>Anstehende Termine</h1>  
  
        <ul>  
            <li class="termin">  
                <span class="datum">04.02.2008 - Termin A</span>  
                <ul>  
                    <li>Beginn 19 Uhr</li>  
                    <li>Ort: Frankfurt</li>  
                </ul>  
            </li>  
            <li class="termin">  
                <span class="datum">04.04.2008 - Termin X</span>  
                <ul>  
                    <li>Beginn 15 Uhr</li>  
                    <li>Ort: Berlin</li>  
                </ul>  
            </li>  
            <li class="termin">  
                <span class="datum">05.04.2008 - Termin Y</span>  
                <ul>  
                    <li>Beginn 9.30 Uhr</li>  
                    <li>Ort: Hamburg</li>  
                </ul>  
            </li>  
        </ul>  
    </body>  
</html>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)