JQuery Kochbuch (German Edition)

'>', '>' );
}
    ----

Code aus anderen Bibliotheken übernehmen
    Problem
    Sie haben in einer anderen JavaScript-Bibliothek eine nützliche Funktion gefunden und wollen die gleiche Technik in Ihrem jQuery-Code nutzen. In diesem Fall handelt es sich um die Methode
.radioClass()
ausder Ext Core-Bibliothek , die den gefundenen Elementen eine Klasse hinzufügt und sie gleichzeitig allen Geschwister-Elementen der gefundenen Elemente entzieht .
    ----
    Note
    Der Name
.radioClass()
entstammt dem Verhalten von Radio Buttons in Webanwendungen und Desktop-Applikationen – man klickt auf einen Button und deselektiert damit alle anderen Buttons in der gleichen Radio Button Group.
    Der Name Radio Button für diese Eingabe-Elemente stammt von den mechanischen Sender-Knöpfen in alten Autoradios – drückt man einen Knopf, springen alle anderen Knöpfe heraus.
    ----
    Nehmen wir einmal diesen HTML-Code:

    Sie möchten nun folgenden Code ausführen können:
// Die Klasse 'hilite' dem Element div#three hinzufügen
// und sie von allen Geschwister-Elementen entfernen
// (z.B. div#one)

$('#three').radioClass('hilite');
    Vielleicht wollen Sie sogar eine »Multi-Select«-Radio-Klasse:
// Klasse 'hilite' zu div#two und div#four
// hinzufügen und von den anderen Geschwister-
// Elementen entfernen (div#one und div#three)

$('#two,#four').radioClass('hilite');
    Lösung
    Schreiben Sie ein einfaches Plugin, um jQuery die Methode
.radioClass()
hinzuzufügen:
// Entfernen der angegebenen Klasse von jedem Geschwister-Element
// der selektierten Elemente, dann Hinzufügen der Klasse zu den
// selektierten Elementen. So können auch mehrere Geschwister-Elemente
// selektiert sein.
//
// Danke an Ext Core für die Idee.

jQuery.fn.radioClass = function( cls ) {
    return this.siblings().removeClass(cls).end().addClass(cls);
};
    Die Funktion ist so kurz, dass man sie auch noch als Einzeiler versteht, aber durch das in Ihre verketteten jQuery-Methoden formatieren beschriebene Einrücken wird der Code noch lesbarer:
jQuery.fn.radioClass = function( cls ) {
    return this // Verketten starten, gibt Ergebnis zurück
     .siblings() // Selektieren aller Geschwister der selektierten Elemente
     .removeClass(cls) // Entfernen der Klasse aus dieser Selektion
     .end() // Zurück zur ursprünglichen Selektion
     .addClass(cls); // Klasse zu selektierten Elementen hinzufügen
};
    Diskussion
    Der Komponist Igor Strawinski soll einmal gesagt haben: »Gute Komponisten leihen sich Ideen aus, große Komponisten stehlen sie.« Er hat dieses Zitat anscheinend von T.S.Eliot gestohlen, der schrieb: »Unreife Dichter imitieren, reife Dichter stehlen.«
    Gute Ideen finden sich an vielen Stellen und andere JavaScript-Bibliotheken sind voll mit gutem Code und guten Ideen. Wann immer es in einer anderen Open-Source-Bibliothek Code gibt, den Sie nutzen möchten und auch zur Zusammenarbeit mit jQuery bringen können, sollten Sie das ruhig tun – vorausgesetzt, Sie respektieren das Copyright und die Lizenz der anderen Autoren.
    ----
    Note
    Informationen zu Open Source und freier Software finden Sie auf folgenden Sites:
    http://www.opensource.org/
http://www.fsf.org/
    ----
    In Fällen wie diesem brauchen Sie vielleicht sogar nicht einmal den eigentlichen Code – die Implementierung ist einfach und nur die Idee der »Radio-Klasse« ist der entscheidende Aspekt. Auch wenn es dann nicht zwingend notwendig ist, sollten Sie doch die Quelle Ihrer Idee mit angeben – das ist einfach guter Stil.
    Ob die Idee nun von jemand anderem oder von Ihnen selbst stammt – in erstaunlich vielen Fällen können Sie ein nützliches jQuery-Plugin in einer oder wenigen Code-Zeilen schreiben.
    ----
    Was ist jQuery.fn und warum nutzen es die jQuery-Plugins?
    jQuery.fn
referenziert auf das gleiche Objekt wie
jQuery.prototype
. Wenn Sie dem Objekt
jQuery.fn
eine Funktion hinzufügen, fügen Sie es eigentlich
jQuery.prototype
hinzu.
    Erstellen Sie mit
jQuery()
oder
$()
ein jQuery-Objekt, dann rufen Sie in Wirklichkeit
new jQuery()
auf. (Der jQuery-Code erledigt das automatisch für Sie.) Wie jeder andere JavaScript-Konstruktor stellt
jQuery.prototype
Methoden und Standard-Eigenschaften bereit, die jedes der von
new jQuery()
erzeugten Objekte besitzt. Wenn Sie also ein
jQuery.fn
-Plugin schreiben, ist das also klassische objektorientierte JavaScript-Programmierung, wobei Sie