Bücher online kostenlos Kostenlos Online Lesen
JQuery Kochbuch (German Edition)

JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts
Vom Netzwerk:

    test("Test von Pulse mit den Standard-Optionen", function() {
     $("div.starship").pulse();
     equal($("#enterprise").css("opacity"),1,"Das Element sollte sichtbar sein");
     equal($("#galactica").css("opacity"),1,"Das Element sollte sichtbar sein");
     n});

     test("Test von Impulse", function() {
     $.pulse.impulse($("#galactica"));

     equal($("#galactica").css("opacity"),1,"Das Element sollte sichtbar sein");
     });
     test("Test von Warpspeed", function() {
     $.pulse.warpspeed($("#enterprise"));

     equal($("#enterprise").css("opacity"),1,"Das Element sollte sichtbar sein");
});


QUnit-Test






        
    USS Enterprise - NC-1701-A

        
    Kampfstern Galactica





        Diskussion
        Das Einbinden des Metadata-Plugins ist ein tolles Beispiel dafür, wie jQuery-Plugins aufeinander aufbauen können. Das Ökosystem der jQuery-Plugins ist riesengroß und es kann gut sein, dass es andere Plugins sind, auf die Sie aufbauen können.
        Um das Metadata-Plugin mit aufzunehmen und zu nutzen, müssen Sie es erst einmal in Ihr Skript einbinden. Das Metadata-Plugin findet sich zusammen mit jQuery bei Google Code. Es ermöglicht Ihnen, zusätzliche Daten in Ihrem HTML-Code einfügen, während weiterhin gültiges HTML erzeugt wird. Wir nutzen dies und ermöglichen es den Anwendern, für Elemente spezifische Optionen in das Klassen-Attribut der Elemente einzubetten, mit denen wir arbeiten wollen.
        Die Optionenwerden per Standard-JSON in den HTML-Code eingebunden. Es können beliebig viele Optionen definiert werden – das liegt ganz beim Anwender. Dabei gibt es auch noch eine Reihe weiterer Methoden und Optionen für das Metadata-Plugin, die auf dessen Dokumentations-Seite beschrieben sind.
        In unserem Plugin prüfen wir zunächst, ob ein Anwender das Metadata-Plugin eingebunden hat. Damit sorgen wir dafür, dass dieses zusätzliche Feature optional bleibt und man auch nach der »klassischen« Methode vorgehen kann. Da das Metadata-Plugin mit einem einzelnen Element arbeitet, gehen wir beim Bestimmen der zu nutzenden Optionen in mehreren Schritten vor. Zunächst holen wir uns die Optionen, die beim Aufruf des Plugins mitgegeben wurden. Diese werden dann durch unsere Standard-Optionen erweitert und dienen so als Ausgangspunkt für diese erste Instanzierung unseres Plugins. Im zweiten Schritt erweitern wir diese lokalen Standard-Optionen durch die Metadaten, die für jedes einzelne Element eventuell definiert wurden. Wir müssen dabei nur dann unsere lokalen Standard-Optionen durch die Metadaten-Optionen erweitern, wenn das Metadata-Plugin überhaupt vorhanden ist.
        Das Metadata-Plugin stellt eine weitere Möglichkeit für Anwender unseres Plugins bereit, Optionen zu übergeben. Wenn Sie die potenziellen Anwender selbst Optionen angeben lassen, zeigen Sie, dass Sie zu Ihrem Plugin stehen und ein engagierter Teilnehmer am jQuery-Ökosystem sind. Das Metadata-Plugin hilft Ihren Anwendern zudem dabei, weniger Code schreiben zu müssen, indem sie eigene Optionen in die HTML-Elemente einbetten können.

    Ihrem Plugin eine statische Funktion hinzufügen
        Problem
        Sie wollen Ihr Plugin nicht nur über die jQuery-Funktion verfügbar machen, sondern auch eine statische Funktion anbieten. Wie können Sie diese Funktion Ihrem jQuery-Plugin hinzufügen?
        Lösung
        Um Ihrem Plugin eine statische Methode hinzuzufügen, müssen Sie das jQuery-Objekt so ähnlich erweitern wie beim Hinzufügen einer Methode. Der Unterschied liegt nur darin, dass Funktionen ohne jQuery-Selektoren aufgerufen werden:
    ;(function($) {
    $.fn.pulse = function(options) {
        // Übergebene Optionen mit Standardwerten verbinden
        var opts = $.extend({}, $.fn.pulse.defaults, options);

        return this.each(function() {

         // Metadaten-Elemente für diesen Knoten einbinden
         var o = $.metadata ? $.extend({}, opts, $.metadata.get(this)) : opts;

         doPulse($(this),o);
        });
    };

    function doPulse($obj,opts) {
        for(var i = 0;i     $obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh);
        }

        // Reset to normal
        $obj.fadeTo(opts.speed,1);
    } // Unsere Basis definieren $.pulse = {}; // Statische Funktion $.pulse.impulse = function($obj) { var opts = { speed: 2500, pulses: 10, fadeLow: 0.2, fadeHigh: 0.8 }; doPulse($obj,opts); } //

    Weitere Kostenlose Bücher