5x bewertet

jQuery Slider

von DiabolicHerz  |  19.03.2010 um 16:47 h
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Einfach Mittelmäßig
Was Du brauchst:
HTML/CSS-Kenntnis und -Verständnis setze ich voraus!


Dieser Effekt lässt sich zwar auch ohne jQuery realisieren (zu finden z.B. auf Dynamicdrive), die Vorteile von jQuery liegen jedoch auf der Hand: Einmal eingebunden, benötigt es nur noch sehr kurze Scripts für viele verschiedene Effekte. Dies führt auch dazu, dass die "Sprache" leichter zu lernen ist und man sich nicht erstdurch zeilenweise unverständlichen Code wühlen muss, wenn man etwas anpassen möchte.

Zunächst einmal muss jQuery in die Seite eingebunden werden. Das Script kannst du auf der offiziellen Seiten herunterladen. Dieser Befehl kommt dann in den Head-Bereich der Seite:

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

(Fast) alles, was dann noch benötigt wird, ist dieses Script, ebenfalls im Head:

<script type="text/javascript">
$(document).ready(function(){

$("#oeffner").click(function(){
$("#box").slideToggle("slow");
$(this).toggleClass("offen");
});

});
</script>

Erklärung dazu:
#oeffner ist *irgendwas* mit der ID "oeffner". Wird dies geklickt, so startet die festgelegte Funktion.
#box ist das, was geöffnet werden soll. Wichtig ist hierbei, dass via CSS für diese ID zunächst display: none; festgelegt wird! Via "slow" wird die Geschwindigkeit festgelegt, in der die #box aufklappt. Diese kann in "fast" oder eine Angabe in Millisekunden geändert werden.
Die letzte Zeile sorgt dafür, dass nicht nur die #box geöffnet, sondern dem #oeffner (-> this) dabei auch die Klasse "offen" zugewiesen wird.

Der HTML-Teil sieht dann bei mir folgendermaßen aus:
<p id="oeffner">Öffnen</p>

<div id="box">
Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen.
</div>

Eine komplette Demo dessen findest du hier.
Vollständiger Quelltext:
<!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>Demo</title>

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

<script type="text/javascript">
$(document).ready(function(){

$("#oeffner").click(function(){
$("#box").slideToggle("slow");
$(this).toggleClass("offen");
});

});
</script>

<style type="text/css">
<!--
body {
font: 15px/1.5 Helvetica, Arial, sans-serif;
}

#container {
margin: 150px auto;
width: 400px;
}

#box {
background: #ddd;
display: none;
padding: 10px;
}

#oeffner {
background-color: #870201;
color: #fff;
cursor: pointer;
display: block;
font-size: 18px;
font-weight: bold;
margin: 0 auto;
padding: 8px 0 5px 0;
text-align: center;
text-decoration: none;
}

.offen {
font-style: italic;
}
-->
</style>
</head>

<body>
<div id="container">

<p id="oeffner">Öffnen</p>

<div id="box">
Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen.
</div>

</div>

</body>
</html>



6 Kommentare




SmaX

Gut erklärt! Cooles Tutorial.. mit jquery ist das echt gut gemacht! 6P
am 19.03.2010 um 18:03 Uhr


Fr34k

Schick Smilie Schönes Tut, gut erklärtˆˆ
am 19.03.2010 um 22:25 Uhr


Skadi

Sehr schönes Tutorial, hat auf Anhieb geklappt & werde sicherlich verwendung dafür finden Smilie
am 23.03.2010 um 19:55 Uhr


drunky

Huhu,
tolles Tut, genau das habe ich gerade gesucht :) Leider ein Problem.. Das Script wird bei mir im IE 8 geblockt, wenn ich es selbst einbaue (habe JavaScript allgemein aber als zugelassen eingestellt).
In deinem Beispiel wird es jedoch nicht geblockt, habe aber genau den Code übernommen. Weißt du vielleicht, woran das liegt?
am 23.03.2010 um 20:38 Uhr


DiabolicHerz

Hey Drunky,
wenn es im Beispiel funktioniert, dann wird das wohl an etwas anderem liegen. Ist dein restlicher Code denn fehlerfrei oder tummeln sich da evtl. noch Fallen? Smilie
am 04.04.2010 um 13:10 Uhr


DJaneMauzi

Hey ich find dieses Tutorial toll. :3 Doch wollt ich fragen wie man dies so macht, das wenn ich eine weiter box öffnen will, das die alte schlisst? oO′ Ich weiß nicht so genau ich das erklären soll, es soll so ungefähr wie bei http://spoonroad.com/ die Navigation sein. ˆˆ*
am 17.10.2010 um 22:15 Uhr