Aufklappen von Website-Bereichen mit Prototype?

[Knut]

Hallo,
leider habe ich keine Tutorials oder ähnliches hierzugefunden und ich hoffe, dass ich hiermit hier auch richtig bin :).

Ich habe eine relativ lange Seite mit viel Text und bisher Text-Links, sprich im Dokument verlinkt (ja, sehr Web 1.0). Ich würde dieses nun gerne mit Prototype (kenne das nur sehr rudimentär von RoR) etwas aufpeppen.
Gibt es eine Möglichkeit Bereiche ein- und aufzuklappen (also klick auf einen Link öffnet seinen Subbereich)?

Weiss einer von euch, welche Funktionen ich dafür nutzen muss ud ob das in Prototype integriert ist?

[Felix Riesterer]

Lieber Knut,

Gibt es eine Möglichkeit Bereiche ein- und aufzuklappen (also klick auf einen Link öffnet seinen Subbereich)?

Weiss einer von euch, welche Funktionen ich dafür nutzen muss ud ob das in Prototype integriert ist?

Dazu braucht es kein Prototype. Das geht wesentlich schlanker!

Du schreibst Dir einfach selbst ein Javascript, dass sich HTML-Elemente einer bestimmten Klasse (suche im Forum nach "getElementsByClassName") sucht, um darin die Elemente auf display:none zu schalten. Bei erneutem Anklicken stellt es den vorherigen Zustand wieder her.

Alternativ verteilst Du mit Deinem Script Klassen, deren CSS-Eigenschaften so beschaffen sind, dass eben die entsprechenden Teile der Website unsichtbar geschaltet werden.

Wenn man sich in Erinnerung ruft, dass das Verändern einer Style-Eigenschaft  mittels JavaScript so ähnlich funktioniert, als schriebe man im HTML-Element selbst das style-Attribut, dann ist es am einfachsten, wenn Du in einer externen Datei Dein Layout bereithälst, Dein Script eben "vor Ort" an den Elementen die display-Eigenschaft auf "none" setzt, um im Aufklapp-Falle, eben diese Eigenschaft auf "" zu setzen, sodass Deine in der externen CSS-Datei angegebene (oder default-)display-Eigenschaft wieder gilt.

Bei Klassennamen kannst Du die entsprechende Klasse aus dem String herausfiltern, falls ein Element mehreren Klassen zugeordnet ist.

Das könnte ich mir so vorstellen:

<div class="artikel">  
    <h2>Unterkapitel</h2>  
    <p>Textabsatz...</p>  
    <p>Noch ein Textabsatz...</p>  
</div>

Du wirst wohl leider nicht darum herum kommen, Elternelemente zu definieren,  wenn Du nicht mühsam die Zusammengehörigkeiten von Überschriften und nachfolgenden Textabsätzen im Script selbst überprüfen willst.

Wenn jetzt Dein Script dem DIV eine weitere Klasse zuweist, dann kannst Du den Artikel zuklappen:

<div class="artikel zu">  
    <h2>Unterkapitel</h2>  
    <p>Textabsatz...</p>  
    <p>Noch ein Textabsatz...</p>  
</div>

Jetzt müsstest Du nur in Deinem Stylesheet das so definieren:

.artikel.zu * { display: none; }  
.artikel.zu h2 { display: block; }

Beim erneuten Anklicken des Artikels wird eben die "zu"-Klasse wieder entfernt, und die Kindelemente werden wieder sichtbar.

Damit ein Besucher auch kapiert, dass da etwas faltbar ist, solltest Du einen entsprechenden optischen Hinweis erzeugen! Das könnte ein Hintergrundbild zu der Überschrift sein, welches eine Art Icon enthält, das dem Benutzer klar macht, dass er da etwas öffnen kann. Eine zusätzliche Veränderung des Cursors über der Überschrift hilft zusätzlich:

.artikel.zu * { display: none; }  
.artikel.zu h2 {  
    display: block;  
    cursor: pointer;  
    background-image: url(pfad/bilder/aufklapp-icon.png);  
    background-position: left center;  
    padding-left: 20px;  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Auge]

Hallo

Ich habe eine relativ lange Seite mit viel Text und bisher Text-Links, sprich im Dokument verlinkt (ja, sehr Web 1.0).

Nöö, sehr HTML.

Ich würde dieses nun gerne mit Prototype (kenne das nur sehr rudimentär von RoR) etwas aufpeppen.
Gibt es eine Möglichkeit Bereiche ein- und aufzuklappen (also klick auf einen Link öffnet seinen Subbereich)?

Ja, du kannst mit JavaScript einerseits Elemente aus- und einblenden als auch den z-index der Elemente verändern, um eines in den Vordergrund zu holen.

Weiss einer von euch, welche Funktionen ich dafür nutzen muss ud ob das in Prototype integriert ist?

Die HTML-Struktur sollte in Etwa so aussehen:

<div class="karteikarte" id="stelle">  
<h2>Eine Überschrift</h2>  
<p>irgendwelcher Text</p>  
</div>  
<div class="karteikarte" id="eine-andere-stelle">  
<h2>Eine andere Überschrift</h2>  
<p>irgendwelcher Text</p>  
</div>

Warum ein den Inhalt ungebendes div? Du willst ja einen ganzen Bereich ein- und ausblenden. Ein eventuell bis dato eingesetzter Anker in einer Überschrift (z.B. so: <h2><a name="stelle">Eine Überschrift</a></h2>) nutzt dir an dieser Stelle nichts mehr.

Mit this, $('ID') (Handbuch: Kapitel 1. Utility Methods) oder einer der anderen dort vorgestellten Methoden kannst du das gewünschte Element auswählen und ihm mit setStyle() (Handbuch: Kapitel 6. Element) eine neue CSS-Eigenschaft überhelfen. Das Ganze möglichst in einer Funktion, die im Link per Eventhandler aufgerufen wird, damit man die Stelle auch im href-Attribut referenzieren kann.

<a href="#stelle" onClick="[code lang=javascript]Funktionsname(this.href,ID-des-anzuzeigenden-Elements);">Linktext</a>[/code]

Damit hast du der Funktion mit dem Namen Funktionsname schon mal das Linkziel this.href und die ID des anzuzeigenden Elements (was ja schon die im Beispiel verwendete ID aussagt) übergeben. In der Funktion sollte dann folgendes ablaufen, es sollten alle infrage kommenden Elemente ermittelt und bis auf das Gewünschte aus- und genau dieses Eine eingeblendet werden.

Um die überhaupt infrage kommenden Elemente zu identifizieren, kannst du ein Array verwenden. Das würde praktisch sein, wenn die Seite keinen oder seltenen Änderungen unterworfen wäre, weil ja auch immer das Array angepasst werden müsste.

Wird die Seite oft geändert, artet das in Arbeit aus, aber wer will das schon. Deshalb -und wegen der CSS Angaben- die für jeden der Bereiche zutreffen- habe ich zusätzlich in jedem Bereich die Klasse "Karteikarte" vorgesehen. Mit ihrer Hilfe lassen sich die zutreffenden Bereiche aus allen mit einer ID versehenen Bereichen ($$('div.Karteikarte') (Handbuch: Kapitel 1. Utility Methods)) herausfiltern. Nun wird geprüft, ob die gefundenen Elemente sichtbar sind, wenn ja werden sie, bis auf das Gewünschte, ausgeblendet. Ist dieses ausgeblendet, wird es eingeblendet.

Ach ja, damit das Ganze auch ohne JavaScript benutzbar bleibt, sollten die CSS-Angaben, die dafür sorgen, dass beim Erstaufruf alles bis auf die Einleitung ausgeblendet wird, ebenfalls per JavaScript erzeugt werden. Ebenfalls sollte deine Funktion false zurückgeben, damit das im href-Attribut notierte Ziel nicht angesprungen wird, wenn JavaScript an ist. Wenn JavaScript nicht zur Verfügung steht, werden sowohl per JavaScript erzeugte Styleangaben als auch das onClick-Attribut sowieso ignoriert, womit deine Seite wie bisher aussähe und sich auch so benutzen ließe.

Tschö, Auge