fadeToggle – die Neue in jQuery 1.4.4

Diese Woche ist jQuery in einem neuen Release erschienen. Neben einigen Bugfixes und kleinen Ändererungen gibt es auch die neue Funktion “fadeToogle”. Sie funktioniert vom Prinzip her genauso wie “toggleClass” und “slideToogle” und dient, wie die anderen, dazu möglichst einfach zwischen verschiedenen Zuständen zu wechseln. Wir wollen das an zwei Beispielen verdeutlichen.

Werfen wir vorher einen Blick auf die Signatur der neuen Methode:
.fadeToggle( [ duration ], [ easing ], [ callback ] )

Duration ist die Zeit in der das Fading ausgeführt wird
Easing ist die Art des Effektes, wobei es standardmäßig hier keine relevanten Änderungsoptionen gibt
Eine Callback Funktion um nach der Animation beliebigen Code auszuführen.

Der Javascript Code sieht nun wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    // Variable um aktuellen Sichtbarkeitsstatus zu speichern
    var toogleState = "visible"
 
    $(document).ready(function() {
        //Beispiel 1
        $("button:first").click(function() {
          $("div#fadingBox").fadeToggle("slow", "linear");
        });
 
        //Beispiel 2
        $("button:last").click(function () {
          $("p:first").fadeToggle("fast", function () {
 
            if(toogleState == "visible"){
                $("button:last").text("zeigen");
                toogleState = "invisible";
            }
            else{
                $("button:last").text("verstecken");
                toogleState = "visible";
            }
 
          });
        });
 
    });

Das erste Beispiel ist ein Box die einfach aus- und wieder eingeblendet wird. Ohne, dass der aktuelle Anzeigestatus sichtbar oder abrufbar wäre.

Das zweite Beispiel zeigt einen einfachen Workaround, um mit dem aktuellen Anzeigemodus zu arbeiten. Also ist das Element gerade sichtbar oder nicht. Die hier vorgestellte Variante ist einfacherer Natur. Es wäre natürlich auch möglich, direkt den Sichtbarkeitsstatus des Objektes selbst abzufragen und entsprechend zu reagieren. Die vorgestellte Möglichkeit wurde wegen der besseren Nachvollziehbarkeit so gewählt. Allerdings wäre sie für größere Projekte wegen einer schlechteren Wartbarkeit weniger zu empfehlen.

Eine Demo dazu findet ihr hier.
Weder das CSS noch das JS sind ausgelagert, also einfach rechte Maustaste und Quelltext anzeigen lassen.

jQuery HowTo: Traversing

Travesieren gehört zum grundlegenden Handwerkszeug, wenn man fortgeschrittene Animationen mittels jQuery durchführen möchte. Hier ein kleine Anleitung zum Auffinden bestimmter Elemente.

Was passiert hier? Basis ist diese HTML Struktur:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

Selektoren in jQuery

Ich möchte eine Serie starten in der Stück für Stück der Umgang mit jQuery seinen Elementen, Selektoren, Plugins, etc. beschrieben wird. Beginnen werde ich mit einer Beschreibung der verschiedenen Selektoren..

Grundlegende Selektoren

• $(‘code’)
• $(‘#someID’)
• $(‘.someClass’)
• $(‘*’)

1

XXX.css("border","3px solid red");

Für XXX wird einfach einer der obigen Selektoren eingesetzt. Besonders ist die Form mit *, die auf alle Elemente in dem Dokument angewendet wird.

Einfache Filter Funktionen

• $(‘li:first’)
• $(‘li:last’)
• $(‘li:not(li:first)’)
• $(‘li:even’)
• $(‘li:odd’)

Diese Selektoren wählen Elemente unter einer bestimmten Bedinung aus. “li-first” z.B. ist eine Referenz auf das erste Objekt einer ungeordneten Liste. “li:not(li:first)” gibt Referenzen auf alle Listenpunkte ausser dem ersten aus und erlaubt eine gewünschte Manipulation dieser Objekte.

1

$("tr:even").css("background-color", "#bbbbff");

Dieser Code würde in einer Tabelle für jeden geradzahligen Index die Hintergrundfarbe mittels der CSS Eigenschaft auf einen neuen Farbton ändern.

Content Filter

• $(‘li:contains(‘stringXXX’)')
• $(‘:empty’)
• $(‘li:has(a)’)
• $(‘p:parent’)

“contains” würde hier alle ListenElemente verändern in denen die Stringphrase “stringXXX” vorkommt.
“empty” prüft alle Elemente darauf ob ein Kindknoten im DOM-Baum vorhanden ist. Auch ein einfacher Text in ein p-Tag würde nicht zurückgegeben werden.

1

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

Visibility Filter

• $(‘:hidden’)
• $(‘:visible’)

Siehe dazu: 3-einfache-tips-fur-die-anpassung-auf-jquery-1.3

Attribut Filter

• $(‘li[class]‘)
• $(‘a[rel="self"]‘)
• $(‘[class^="my"]‘)
• $(‘a[title$="blog"]‘)

Eine interessante Möglichkeit ist das Filtern von Elementen anhand eines Attributes. “li[class]” spricht das oder die Element(e) an, die eine Attribut class besitzen.
“a[rel="self"]” zeigt auf Elemente von link Tags, welche im Attribut “rel” den Wert “self” besitzen.
Der dritte Listepunkt zeigt auf alle Knotenelemente die bei ihrem class Attribut mit “my” beginnen.
Der letzte Punkt stellt eine Möglichkeit dar, nach Elementen zu suchen, die am ende eines Attributes ein bestimmten String als Wert besitzen.

1

$("input[class^='my']").val("news here!");

Formulare

• $(‘:input’)
• $(‘:text’)
• $(‘:radio’)
• $(‘:checkbox’)
• $(‘:submit’)
• $(‘:image’)
• …

Hiermit lassen sich in HTML spezifizierten Formen von Formularfeldern ansprechen.

Formular Filter

• $(‘input:enabled’)
• $(‘:disabled’)
• $(‘:checked’)
• $(‘:selected’)

Mit diesen Filtern lassen sich abgeleitet von verschiedenen Eigenschaften der Formularfelder Elemente referenzieren. Also kann mit können mithilfe obiger Selektoren beispielsweise alle Felder die derzeit die Eigenschaft disabled besitzen ansprechen und manipulieren.

1

$("input:disabled").val("this is it");