jQuery Einführung II

Palme Florian — Fri, 04 Sep 2009 14:07:01 +0000

Weiter gehts mit einer weiteren Einführung in das machtvolle jQuery-Framework!

Wir möchten heute die Funktionen vom letzten mal ein bisschen vereinfachen. Es gibt in jQuery einen Interaction-Helper, der sich “toggle” nennt. In diesen Helperkann man beliebig viele Funktionen packen, welche nacheinander ausgeführt werden.

Wir hängen die toggle-Funktion an den Selector der vorherigen Einführung an.

1
2
3

$(function(){
$("#klapp").toggle();
});

toggle ist, dem Event nach, click gleich zu stellen – d.h., Funktionen in toggle, werden bei einem Click ausgeführt. Um das zu veranschaulichen, mal folgende Funktionserweiterung.

1
2
3
4
5
6
7

$(function(){
$("#klapp").toggle(function(){
alert("Funktion 1 ausgeführt!");
}, function(){
alert("Funktion 2 ausgeführt!");
});
});

Hier wird beim ersten Klick auf “Auf- / Zuklappen” die Funktion 1 ausgeführt. Bei einem weiterem, dem zweiten Klick wird Funktion 2 ausgeführt. Beim dritten Klick ist es nun nicht so, dass garnichts passiert. Im Gegenteil. Es wird wieder die erste Funktion ausgeführt.

In unserem Fall wissen wir, dass das Div, welches wir Auf- und Zuklappen möchten, geöffnet ist. Somit können wir die erste Funktion dementsprechend anpassen und das Div schließen. In der zweiten Funktion öffnen wir es wieder.

1
2
3
4
5
6
7

$(function(){
$("#klapp").toggle(function(){
$(".klappen").hide(300);
}, function(){
$(".klappen").show(300);
});
});

Beispiel ansehen

Kostenloser Download

Auch lässt sich der Inhalt eines Elements ganz einfach ändern. Der Einfachheit halber verwenden wir die obige toggle-Funktion sowie das passende HTML. Das einzige was wir ändern, ist die Effekt-Funktion hide & show. Wir ändern beide zur Manipulations-Funktion html.

1
2
3
4
5
6
7

$(function(){
$("#klapp").toggle(function(){
$(".klappen").html();
}, function(){
$(".klappen").html();
});
});

Da dies zu keinem Ergebnis führen würde, muss der Funktion noch ein Inhalt mitgegeben werden.

1
2
3
4
5
6
7

$(function(){
$("#klapp").toggle(function(){
$(".klappen").html("Hallo!");
}, function(){
$(".klappen").html("Boa, ich tick aus!");
});
});

Beispiel ansehen

Kostenloser Download

Wie Ihr seht, kann man in der html-Funktion auch HTML mitgeben. Dies wird natürlich sofort angewendet.

jQuery Einführung

Palme Florian — Sat, 29 Aug 2009 13:58:38 +0000

jQuery ist ein mächtiges und auch sehr beliebtes JavaScript-Framework! Ich möchte Euch heute eine Einführung in jQuery geben und ein paar Dinge zeigen.

Zu beginn müsst Ihr euch die jQuery-Bibliothek zu downloaden. Dazu geht auf die jQuery-Page und klickt auf den großen Button rechts. Nun können wir beginnen!

[ 1 ] Wir bereiten erst einmal unser HTML-Document vor:

1
2
3
4
5
6
7
8
9
10

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Einführung</title>
</head>

<body>
</body>
</html>

Nachdem wir die Datei abgespeichert haben, binden wir die jQuery-Bibliothek in den -Bereich der HTML-Datei ein. (Bitte denkt daran, die JS-Datei in den gleichen Ordner zu packen, wie eure HTML-Datei. Ansonsten Dateipfade anpassen. )

1	<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js "></script>

Als nächstes schreiben wir unseren ersten jQuery-Code. Dieser Teil kommt wieder in den -Bereich, unter den oberen Teil.

1
2
3
4
5

Alle Anweisungen, welche in dieser Funktion stehen, werden erst Ausgeführt, wenn die ganze Seite geladen ist. Somit gehen wir Sicher, dass unser Code immer funktioniert.

[ 2 ] Als erstes Zeige ich Euch, wie ihr HTML-Elemente ganz einfach Anzeigen (Aufklappen) und Verstecken (Zuklappen) könnt. Wir schreiben also folgenden HTML-Code in den -Bereich der HTML-Datei:

1
2
3

<b id="klapp">Auf- / Zuklappen</b>
<div class="klappen">Mich kann man Auf- und Zuklappen!</div>
<div class="nichtklappen">Mich kann man <b>nicht</b> Auf- und Zuklappen!</div>

Anderst, wie normal in JavaScript, benötigen wir keinen Funktionsaufruf im HTML-Bereich. Das übernehmen für uns so genannte “Selectoren” & “Event-Helper”. Selectoren geben an, auf welchem Element ein Event-Helper ausgeführt werden soll. Event-Helper bestimmen, wann eine Funktion ausgeführt werden soll. Dazu gehören z.B. “click”, “hover”, “mouseup”, “focus” und noch viele mehr.

Selectoren: Selectoren zeigen auf einen bestimmten Tag im HTML-Breich. Genauso, wie in CSS, können ID’s, Klassen und normale Tags angesprochen werden (#MeineId, .meineKlasse, span). In unserem Fall möchten wir, bei einem Klick auf das b-Tag mit der ID “klapp” das Div mit der Klasse “klappen” Auf- / Zuklappen. Also sprechen wir die ID an: $(“#klapp”).

Event-Helper: Wie oben schon gesagt, bestimmen Event-Helper, bei welcher User-Aktion (Mausklick, Tastendruck, …) eine Funktion ausgeführt werden soll. In unserem Beispiel verwenden wir den Event-Helper “click”. Hängen wir unserem Selector also den Event-Helper mit einer Funktion an: .click(function(){});. Euer JS-Code müsste nun so aussehen:

1
2
3
4
5

$(function(){
$("#klapp").click(function(){

});
});

Nun müssen wir das Div mit der Klasse “klappen” verstecken. Dazu benötigen wir nur einen weiteren Selector (welcher auf “.klappen” zeigt) und eine Effekt-Funktion (hide, show).

1
2
3
4
5

$(function(){
$("#klapp").click(function(){
$(".klappen").hide(); //Hier verstecken wir das Div mit der Klasse klappen
});
});

Bei jedem Klick würde jQuery nun versuchen, das Div zu verstecken. Also prüfen wir, ob das Div schon versteckt ist, wenn nicht, verstecken wir es. Beim verstecken wird der CSS-Style “display” auf “none” gestellt. Wir können mit der jQuery-Funktion .css Prüfen, ob das Div versteckt ist.

1
2
3
4
5
6
7
8

$(function(){
$("#klapp").click(function(){
if($(".klappen").css("display") != "none")
{
$(".klappen").hide();
}
});
});

Jetzt einfach noch eine else-Anweisung an die If-Abfrage packen und das Div wieder anzeigen.

1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
$("#klapp").click(function(){
if($(".klappen").css("display") != "none")
{
$(".klappen").hide();
}
else
{
$(".klappen").show();
}
});
});

Nun öffnet euer HTML-Dokument im Browser und testet eure soeben geschrieben jQuery-Funktion!

Beispiel ansehen

Kostenloser Download

[ 2 ] Sicherlich ist das nichts besonders, aber mit dem fast gleichem Code, kann man einen ganz anderen Effekt erzielen. Wir setzten nun in die Effekt-Funktion hide() & show() jeweils eine Zahl.

1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
$("#klapp").click(function(){
if($(".klappen").css("display") != "none")
{
$(".klappen").hide(1000);
}
else
{
$(".klappen").show(1000);
}
});
});

Beispiel ansehen

Kostenloser Download

[ 3 ] Es gibt aber noch eine weitere Möglichkeit, ein Element Auf- bzw Zuklappen zu lassen. Ändern wir doch mal show(1000) zu slideDown(1000) und hide(1000) zu slideUp(1000).

1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
$("#klapp").click(function(){
if($(".klappen").css("display") != "none")
{
$(".klappen").slideUp(1000);
}
else
{
$(".klappen").slideDown(1000);
}
});
});

Beispiel ansehen

Kostenloser Download

[ 4 ] Lassen wir das Div doch mal Aus- / Einfaden. Also ändern wir wieder die Effekt-Funktionen.

1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
$("#klapp").click(function(){
if($(".klappen").css("display") != "none")
{
$(".klappen").fadeOut(1000);
}
else
{
$(".klappen").fadeIn(1000);
}
});
});

Beispiel ansehen

Kostenloser Download

Wie Ihr seht, kann mit ganz wenig Code große Effekte erzielen. Experimentiert doch ein bisschen herum!

Lg,
euer Flo

Punkt . 16 » jQuery

jQuery Einführung II

jQuery Einführung