jQuery Einführung II
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("<b>Boa</b>, 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.
