22 November 2009 HowTo, Javascript, jQuery, Plugin Robert Muehsig

image

Wer mit Javascript irgendwelche tollen Sachen machen möchte, kann dies natürlich alles selbst schreiben oder er nimmt sich ein vorgefertiges Framework und fügt ein paar Features hinzu. In diesem Blogpost will ich nur sehr kurz mal den Einstieg in die jQuery Plugin Entwicklung zeigen.

Javascript ist der Teufel!!!

Erstmal vorweg: Viele .NET Entwickler haben direkt Angst vor Javascript. So schwierig ist es nicht und ("im gewissen Sinne") ist auch Objektorientierung enthalten. Zudem kann man mit Javascript echt nette Sachen machen, wie man z.B. an den unzähligen jQuery Plugins sieht.

jQuery Plugin - wie fängt man an:

    (function($) {
        $.fn.fooBarTest = function() {

	// plugin code

        };
    })(jQuery);

Hiermit hängen wir nun an "$" eine Funktion "fooBarTest" an. Diese kann ich einfach über "$(SELEKTOR).fooBarTest()" aufrufen.

Iterationen

Durch den Selektor können natürlich mehrere Elemente von der Funktion "betroffen" sein. Dafür kann man innerhalb mit "each" die Elemente durchlaufen. Für jedes Element gebe ich einfach ein alert aus.

    (function($) {
        $.fn.fooBarTest = function() {

            return this.each(function() {
                var $e = $(this);
                alert($e);
            });

        };
    })(jQuery);

Im Grunde sehr einfach.

Anwendung:

    $(document).ready(function() {
        $(".page").fooBarTest();

        $("li").fooBarTest();
    });

Besseres Beispiel

Auf diesem Blog gibt es eine wesentlich genauere Beschreibung und von da habe ich auch meine Informationen. Ich merke mir am besten was, wenn ich es einfach mal ausprobiere ;)
In einem der nächsten Blogposts möchte er auch zeigen, wie man z.B. Parameter mitgibt.
Nachtrag: jQuery Lesson Series: How to Add Options to Plugins

Für alle Interessierten: jQuery Lesson Series: How to Implement Your First Plugin

jQuery Informationen

Hier noch ein paar nette Blogs über jQuery:


Written by Robert Muehsig

Software Developer - from Saxony, Germany - working on primedocs.io. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de