Aus gegebenen anlass ein ganz einfacher und kurzer Codeschnipsel mal wieder von mir
Funktion: Über ein oder mehrere Checkboxen Inhalt ein/ausblenden
Benötigt: jquery 1.3.2
Das ganze basiert auf AJAX bzw genauer gesagt auf dem Framework jquery (Link) selbst benutzen wir hier eine jquery eigene Funktion mit der man Inputfelder ansteuern kann.
zuerst binden wir also jquery in unsere Seite ein, gefolgt von einer Zeile CodeCode:<script type="text/javascript" src="jquery.min.js"></script>
in in der Seite selbst sieht unsere Checkbox wie folgt ausCode:<script type="text/javascript"> function show(wert){ $('input[name="'+wert+'"]').is(':checked') && $('#'+wert+'').slideDown('slow') || $('#'+wert+'').slideUp('slow'); }; </script>
zu beachten ist das der Name der Checkbox (name="") und der Wert unserer Funktion ( onclick="show(' ')" ) identisch sind.Code:<input name="box1" type="checkbox" onclick="show('box1')" checked />
Nun erstellen wir uns nur mehr eine schöne Div-Box und fertig
Im Div selbst geben wir noch eine ID an (id="box1") über welchen wir eben dem Script sagen welchen Div er uns anzeigen/ausblenden soll.Code:<div id="box1" class="show_box" >Hier der Inhalt</div>
Der klare Vorteil hier ist, da wir das ganze über eine Funktion lösen, können wir soviele Checkboxen und Divs anlegen wie wir wollen, ohne im oberen Scriptteil etwas zu ändern.
Getestet mit: FF3.5, IE7 und Opera10
Bei Fragen steh ich gerne zur Verfügungansonsten viel spaß mit dem kleinen Codeschnipsel


LinkBack URL
About LinkBacks






Zitieren
Lesezeichen