Auf- & zuklappende Div's mit Prototype

von Marcel Domke | 0 | 9 Kommentare | 6146 Aufrufe

Anzeige Hier werben

Hier erkläre ich, wie Ihr mit Prototype ganz einfach eine Liste mit verschiedenen Textblöcken auf- und zuklappen könnt.

Als erstes brauchen wir die neueste Version vom Prototype Framework. http://prototypejs.org/download
Diese Datei bindet Ihr in euere Seite im <head> Bereich ein:
Z.B.:

JavaScript

1	<script type="text/javascript" src="prototype.js"></script>

Als nächstes Brauchen wir unsere Container die wir später auf- und zuklappen lassen.

HTML

<div class="mainContainer opened">

    <div class="buttonContainer"> <span class="toggle-button">toggle</span> </div>
    <div class="toggle-target">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    
    <div class="buttonContainer"> <span class="toggle-button">toggle</span> </div>
    <div class="toggle-target">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    
</div>

Hier noch ein wenig CSS, damit das ganze auch schön aussieht:

css

<style type="text/css">
body {
    font-family: verdana;
}
div.mainContainer {
    width:800px;
    margin:0 auto; /* Zentrierung im Firefox */
    text-align:center; /* damit es im IE auch Zentriert ist */
}
div.mainContainer div.buttonContainer {
    width:100%;
    border:1px solid silver;
    background:silver;
    
    margin:10px 0px 0px 0px;
}
div.mainContainer div.buttonContainer span.toggle-button {
    display: block;
    width:80px;
    border:1px solid black;
    margin:4px;
    text-align:center;
    cursor:pointer;
}
div.mainContainer div.toggle-target {
    text-align: left;
    padding:10px;
    border-left:1px solid silver;
    border-right:1px solid silver;
    border-bottom:1px solid silver;
}
</style>

Als nächstes machen wir unter der eingebundenen Prototype Datei einen Javascript Block auf.
Wir definieren als erstes, wann das ganze Skript ausgeführt werden soll:

JavaScript

1
2
3

document.observe('dom:loaded', function () {

});

Hiermit sagen wir dem Javascript, das der Inhalte erst ausgeführt soll wenn, der Content geladen wurde. Das gild nicht für Bilder!!

Als nächstes definieren wir die Variablen die wir später brauchen:

JavaScript

1
2
3

/* Deklaration der Variablen */
var arrToggelButton = $$('.toggle-button');
var arrToggleTarget = $$('.toggle-target');

Die $$ Methode kann belibig viele CSS-Selektoren beinhalten und liefert als Resultat ein Array zurück.
z.B. $$('div.box').first(); Result = Das erst div Element mit der Klasse box welches im DOM gefunden wurde
$$('div.box'); Result = Array mit allen div Elementen mit der Klasse box die im DOM gefunden werden konnten.

JavaScript

arrToggelButton.each(function (elButton, intIdx) {
    elButton.observe('click', function () {
        arrToggleTarget[intIdx].toggle();
    });
});

Wir benutzen nun das Array arrToggleButton, welches nun 2 Elemente beinhaltet und iterieren darüber. Jedes Element wird nun in der Variabel elButton gespeichert. Nun observen/überwachen wir das Event 'click' auf dem Element elButton. Zuvor haben wir noch einen Zähler definiert, intIdx. Diesen benutzen wir nun, um dass zu dem Button gehörige Container (toggle-target) zu identifizieren. Fertig! Nun könnt Ihr die Container auf und zu klappen.

Hier noch einmal alles komplett.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<title>Tutorial</title>
<script type="text/javascript">
document.observe('dom:loaded', function () {

    /* Deklaration der Variablen */
    var elMainContainer = $$('.mainContainer').first();
    var arrToggelButton = $$('.toggle-button');
    var arrToggleTarget = $$('.toggle-target'); 
    
    arrToggelButton.each(function (elButton, intIdx) {
        elButton.observe('click', function () {
            arrToggleTarget[intIdx].toggle();
        });
    });
    
});

</script>
<style type="text/css">
body {
    font-family: verdana;
}
div.mainContainer {
    width:800px;
    margin:0 auto; /* Zentrierung im Firefox */
    text-align:center; /* damit es im IE auch Zentriert ist */
}
div.mainContainer div.buttonContainer {
    width:100%;
    border:1px solid silver;
    background:silver;
    
    margin:10px 0px 0px 0px;
}
div.mainContainer div.buttonContainer span.toggle-button {
    display: block;
    width:80px;
    border:1px solid black;
    margin:4px;
    text-align:center;
    cursor:pointer;
}
div.mainContainer div.toggle-target {
    text-align: left;
    padding:10px;
    border-left:1px solid silver;
    border-right:1px solid silver;
    border-bottom:1px solid silver;
}
</style>
</head>
<body>

<div class="mainContainer opened">

    <div class="buttonContainer"> <span class="toggle-button">toggle</span> </div>
    <div class="toggle-target">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    
    <div class="buttonContainer"> <span class="toggle-button">toggle</span> </div>
    <div class="toggle-target">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    
</div>


</body>
</html>

Über den Autor: Marcel Domke

Ich arbeite als Webentwickler bei der REGIOCAST GmbH & Co KG, seit Aprill 2008. Dort bin ich zuständig für die Seiten des Radiozentrum Kiel's.
Profilseite betrachten

Kommentare: Auf- & zuklappende Div's mit Prototype

Neuen Kommentar schreiben

Gutes Script

Beantworten

aber was muß ich ändern, wenn ich in der Grundstellung die Container geschlossen haben möchte.

Vielen Dank im Voraus!

tatura am 21.01.2009 um 16:59

Re: Gutes Script

Beantworten

ist doch ganz einfach =)

Marcel Domke am 22.01.2009 um 08:10

ganz anders gelöst..

Beantworten

Hi,

ich kenne Prototype oder Mootools nicht und habe das so gelöst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Auf- und Zuklappen</title>
</head>

<body>

<script type="text/javascript">function show(info) { if (document.getElementById(info).style.display=='none') { document.getElementById(info).style.display='block'; } else { document.getElementById(info).style.display='none'; }}function hide(info) { if (document.getElementById(info).style.display=='block') { document.getElementById(info).style.display='none'; } else { document.getElementById(info).style.display='block'; }}</script>

<h1><a href="#" onClick=" show('1');return false">Überschrift des Divs</a></h1><div id="1" onclick="hide(1);return false" style="display:none; border:1px solid #e54e16; padding:0px 10px 10px 10px;"><p>Inhalt des Divs. Schliessen funktioniert auch, wenn man in das Div klickt. Woran ich noch bastele, ist eine Funktion, die ein offenes Div schliesst, wenn ein anderes geöffnet wird.</p></div>
</body>
</html>

HaJo am 04.09.2008 um 10:56

Re: ganz anders gelöst..

Beantworten

Das ist ja gut, aber was ist wenn du mehrere Boxen hast die du Auf und zu klappen willst? In deinem Fall müstest du immer neue Id's sprich Boxen und a Tags anlegen und hast viel mehr Quellcode zu überprüfen... In dem Oben erklärten Beispiel ist auch zusätzlich noch der JS Quellcode vom HTML Code getrennt, was zur Übersicht beiträgt!

Beschäftige dich mit Prototype oder Mootools und du wirst sehen das es ganz viele Vorteile mitsichbringt eines der beiden Frameworks zu benutzen.

Marcel Domke am 04.09.2008 um 13:20

Mootools?

Beantworten

Schonmal was vom Mootools Framework gehört? Nicht unbedingt auf dieses Beispiel bezogen aber allgemein ist es mein Empfinden, dass diese Javascript Bibliothek etwas ausgereiftere Funktionen hat... und sehr schön kompakt ist. Kann ich ja auch mal einen Artikel beitragen :)

Erik Fleischer am 04.03.2008 um 11:42

Re: Mootools?

Beantworten

Schonmal was vom Mootools Framework gehört? Nicht unbedingt auf dieses Beispiel bezogen aber allgemein ist es mein Empfinden, dass diese Javascript Bibliothek etwas ausgereiftere Funktionen hat... und sehr schön kompakt ist. Kann ich ja auch mal einen Artikel beitragen :)

Ja mootools ist auch nett, leider wurde ich quasi dazu genötigt "prototype" zu benutzen, das es hier in der Firma pflicht ist ;)

Aber mach mal nen Artikel gucke mir den sicher mal an ;)

Marcel Domke am 04.03.2008 um 11:46

Beispiel funktionslos?

Beantworten

Moin,

geht nur bei mir das Beispiel nicht (im aktuellen FF und Opera) oder ist das ein allgemeines Problem?

Holger V am 04.03.2008 um 09:10

Re: Beispiel funktionslos?

Beantworten

Das Beispiel war gar nicht freigeschaltet. Da Prototype extern eingebunden wird, hab ich's auch erst mal deaktiviert - da müssen wir noch eine Lösung für finden. Sobald die da ist, wird's wieder aktiviert.

Firebird am 13.03.2008 um 15:08

Re: Beispiel funktionslos?

Beantworten

Moin,

geht nur bei mir das Beispiel nicht (im aktuellen FF und Opera) oder ist das ein allgemeines Problem?

Liegt wohl eher daran das dann die Prototype Datei nicht included ist! prototype ist eine eigene browserweiche und geht in allen gängigen Browsern

Marcel Domke am 04.03.2008 um 09:24

Webdesign, Tutorials und mehr - Webmasterpro.de

Clientseitig

Serverseitig

Über Webmasterpro.de

Unsere Sponsoren