Aufklappen von Website-Bereichen mit Prototype?

[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