20.08.2008 - geschrieben von mrvn in Tutorials

26 Detail Slider mit jQuery

detailslider

Nun gibt es wieder Nachschlag im Tutorialbereich. Diesmal erkläre ich an einem simplen Beispiel wie einfach man mit jQuery einfache Effekte zaubern kann, ohne vorher wirklich mit Javascript gearbeitet zu haben.

Vorrausetzungen

1. Das Grundgerüst, welches wir im ersten Tutorial erstellt haben, dient nun wieder als Grundlage (Demo).

2. Weitere Vorrausetzung ist die aktuellste Version von jQuery, die in den html-Header eingebunden wird, z.b. so:

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

Los gehts…

Unter jedem Artikel wollen wir also nun ein Link einfügen, der uns die Details mittels einem kleinen jQuery-Effekt anzeigt. Dazu schreiben wir unter jeden Artikel noch ergänzenden HTML-Queltext:

<div class="details">
     <p>Details des Artikels wie Datum, Autor etc...</p>
</div>
<a class="toggle" href="#">» Details</a>

Der div-Container mit der Klasse .details ist das Element was sozusagen raus und rein “geslidet” wird, während der Link darunter mit der Klasse .toggle das ausführende Element ist, welches das vorherige dazu bewegt! Deswegen tauchen diese beiden Elemente nun ebenfalls in unserem Javascript Quelltext auf, welchen wir im head-Bereich des Dokumentes oder in einer externen .js Datei abspeichern und ebenfalls einbinden:

jQuery Code

$(document).ready(function(){
	$("div.details").hide();

	$("a.toggle").click(function(){
		$(this).prev("div.details").slideToggle("slow")
	});
});

Das ist einfacher als es aussieht. Bloss nicht erschrecken.
$("div.details").hide(); gibt lediglich an, das die Elemente, welche die Details enthalten beim Starten der Seite nicht angezeigt werden. Diese wollen wir ja schliesslich erst mit einem Klick sichtbar machen. $("a.toggle").click gibt an welches Element als Button agiert, in diesem Falle alle Links mit der Klasse .toggle. und die letzte Zeile gibt an welches Element “geslidet” wird, in diesem Falle alle div‘s der Klasse .details.

Das Ergebnis

Dazu kommt noch ein wenig CSS, damit es nicht ganz so kahl aussieht: Demo

  jQuery Detail Slider (17.0 KiB, 620 Downloads)

Hoffe euch hat das Tutorial gefallen. Wenn Fragen auftreten sollten, könnt ihr diese natürlich gerne in den Kommentaren loswerden. Vielen Dank für’s Lesen.

Tags:

26 Kommentare

Trackback - RSS Kommentare zu "Detail Slider mit jQuery"

Dein Gedanke dazu?...