HowTo: Erster Schritt zur jQuery Plugin-Entwicklung

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:


Kick It auf dotnet-kicks.de
Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

One Response

  1. Als Entwickler von Webseiten kann ich mir die Arbeit ohne jQuery überhaupt nicht mehr vorstellen. Anfangs wurde es von den Machern anderer Frameworks, wie Mootools und Co. noch belächelt. Doch zwischenzeitlich hat es sich zu “der JavaScript-Library” gemausert. Meiner Meinung nach gibt es derzeit nichts Besseres!

    Grüße a.d. Harz

    Werner

    Reply

Comment on this post

Letzte Posts

  • image.png
    RavenHQ–RavenDB in der Cloud

    Ayende Rahien hat es heute verkündet – RavenHQ, der RavenDB Cloud Hoster (natürlich von und mit Ayende) ist ab heute raus aus der Beta und man kann es von überall aus nutzen. In der Betaphase waren nur Nutzer von AppHarbor zugelassen. Was ist RavenHQ? RavenHQ ist im Grunde ein gehostes RavenDB in den Rechenzentren von ...

  • image.png
    GitHub for Windows–erste Eindrücke

    Git ist schon eine tolle Sachen und eröffnet viele neue Möglichkeiten – allerdings ist der Einstieg recht hart und selbst wenn man die guten Hilfsanleitungen auf GitHub befolgt, kommt man am Anfang nur langsam vorwärt. Insbesondere ist das Tooling für Windows / .NET Entwickler auch nicht gerade “bekanntes Terrain”. GitHub to the rescue! Die GitHub ...

  • image.png
    Chocolatey–apt-get für Windows

    Durch Zufall bin ich auf das Tool “Chocolatey” gestoßen. Wer die Website sich anschaut, wird evtl. eine Verwandschaft mit NuGet ausmachen. Was macht Chocolatey? Chocolatey ist ein “Maschine Package Manager”, das bedeutet, dass man für seine Maschine einfach Tools runterladen und Updaten kann – direkt über die Konsole. Was ist der Unterschied zu NuGet? NuGet ...

  • image.png
    SASS, LESS & Coffeescript in Visual Studio mit der Web Workbench

    CSS und Javascript sind die “kleinste” Schnittmenge von allen Browsern für die Erstellung von Web-Applikationen. Leider geht dabei etwas komfort verloren, daher lieben alle Webentwickler jQuery! SASS und LESS sind zwei Varianten, wie man “schöner” CSS schreiben kann und Coffeescript versucht Javascript Entwicklung zu vereinfachen. Aber immer der Reihe nach… Was ist SASS? SASS steht ...

  • image.png
    Code-Inside Sample nun auf GitHub: Google Code zu GitHub Migration

    Seit einiger Zeit habe ich Beispielcode auf Google Code bereitgestellt. Einfach nur noch weg von Google Code O-Ton damals war: Ich hatte mich für Google Code entschieden, weil ich hoffe dass früher oder später die Google Code Suche nutzbar ist und es dadurch wenigstens ein kleiner Mehrwert entsteht. Allerdings wirft es momentan noch ein Fehler. ...

Auf Amazon einkaufen & unterstützen

Facebook