Tutorials von Thomas Frei-Herrmann

jQuery - Expanded Toggle Panel

... und so sieht es dann aus

Hier die Original-Seite mit diesen Skripten:

http://www.adipalaz.com/experiments/jquery/multiple_expand_all_collapse_all.html



Hier könnt Ihr Euch meine modifizierten Skripte downloaden. Downloads seit dem 26.03.2011: 284

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="../expandscripts/expand.js"></script>
<link rel="stylesheet" type="text/css" href="../expandscripts/expand.css">

... wie Ihr oben erkennen könnt, wird zum einen auf die Datei “expand.js” verlinkt, die alle Javascript-Anweisungen enthält und zum anderen auf die CSS-Datei “expand.css”, die sämtliche CSS-Einstellungen enthält. Diese CSS-Einstellungen könnt Ihr dort auf Eure Bedürfnisse
anpassen.

Öffnet nun im Ordner “Seiten-Codes” mit Eurem “Windows-Editor” auch noch die Datei:

jQuery-Expand-Body-Codes.txt


Nun müsst Ihr diesen Code mit Euren Kategorien, Titeln und Texten versehen, die in den Panelen erscheinen sollen.

<h2>zwischen diesen Tags stehen die Kategorien</h2>
<h3>zwischen diesen Tags stehen die Titel</h3>

und zwischen den DIV-Containern der eigentliche Text, der dann ausklappt. Die jeweilige CSS  “class” wird in der CSS-Datei erzeugt.

<div class="collapse">zwischen diesen Tags steht der auszuklappende Text</div>

... wobei der Zusatz “shown” ein Panel beim Aufruf der Seite bereits geöffnet darstellt:

<div class="collapse shown">diese Class bewirkt, dass das Panel bereist geöffnet ist</div>

... zieht Euch nun ein Textfeld in Eurem Layout auf, wo dieses Skript erscheinen soll und fügt den fertigen Code in die HTML ein:

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Text” klicken
> und anschließend auf den Button “HTML” und den Code einfügen

.... mit den CSS-Einstellungen der Datei “expand.css” müsst Ihr ein wenig herum probieren, ich habe z.B. diese Änderungen vorgenommen.

... in die einzelnen DIV-Container könnt Ihr auch ganz normalen HTML-Code einbringen, wie z.B. Bilder oder auch Links. Hier einige Beispiele von meinem ersten Panel:

Für das Bild: (hier zentriert. Achtet auch hier auf die relative Pfadangabe zum Bild, ein oder zwei Punkte)

<p align="center"><img src="./assets/images/Stinktier.gif" alt="Herzlich willkommen" title="Herzlich willkommen"></p>

Für einen Link:

<p><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Klick zu den Tutorials von Thomas Frei-Herrmann</a></p>

... oder auch im <h3> Tag (Titel) meines ersten Panels:

<h3 class="expand">Titel 1<br><span style="color:#333333">Hier könnte man auch einen Eingangstext in mehreren Zeilen schreiben.
<br>Man kann einstellen, ob oder welches Panel bereits geöffnet erscheint.</span></h3>

expand.css - meine Änderungen


Da meine Beispielseite hier zentriert ist, wollte ich, dass auch die Box zentriert erscheint. Die Voreinstellungen geben 15% Abstand vom linken Rand (bezogen auf die Layoutbreite, bzw. die Breite des Textfeldes) an. Das habe ich in 0% geändert, sodass die Box direkt am linken Rand meines aufgezogenen Textfeldes beginnt.

Dazu habe ich die Datei expand.css mit meinem Windows-Editor geöffnet und die Class “wrapper” geändert:

#wrapper{
  margin:0 auto;
  /* EDIT Thomas 'padding' auf 0% gestellt
  padding:15px 15% 8em;*/
  padding:15px 0% 8em;
  text-align:left
}

... weiterhin wollte ich nicht, dass die Box auf 100% der Layoutbreite (bzw. der Länge des aufgezogenen Textfeldes) dargestellt wird, sondern sie sollte hier genau 890px breit sein.

Dazu habe ich die Datei expand.css mit meinem Windows-Editor geöffnet und die Class “content” geändert:

#content {
  max-width:70em;
  /* EDIT Thomas 'width' auf 890px gestellt
  width:100%;*/
  width:890px;
  margin:0 auto;
  padding-bottom:20px;
  overflow:hidden
}

Viel Erfolg!