Eigenes JQuery Plugin programmieren – Tutorial

Werbung

Im Tutorial „Eigenes JQuery Plugin programmieren“, werde ich, oh Wunder, erklären wie man einfach und schnell ein eigenes Plugin für JQuery erstellen kann.

Wenn jemand JQuery noch nicht kennt, sollte sich die Seite von JQuery mal anschauen. Dort sind auch bereits einge Tutorials und Plugins zu haben.

Dieses Tutorial habe ich mit JQuery 1.7.1 getestet.

Wieder mal das Rad

Für JQuery gibt es bereits verdammt viele Plugins. Daher sollte man als erstes in der Plugin Library oder in einer Suchmaschine nach einem entsprechenden Plugin suchen. Damit kann man sich viel Zeit und Arbeit ersparen.

Tor, Tor, Tooooor

In meinem Tutorial geht es nicht darum, einen Text rückwärts darzustellen oder einen Tooltip zu produzieren, sondern um die aktuelle Fussball Bundesliga Tabelle.

Das HTML Grundgerüst

Um das Beispiel nicht zu kompliziert zu machen, ist das Design sehr spartanisch. Auf große CSS Deklarationen verzichte ich daher an dieser Stelle.

Damit habe ich jetzt unser kleines HTML Grundgerüst erstellt und ich werde es jetzt erweitern.


Die Tabelle ist jetzt noch nicht besonders hübsch, aber ich arbeite daran. Das ist ja auch der eigentliche Grund für das Plugin.

Das JQuery Plugin

Jetzt öffne ich die Datei /js/fussballtabelle.js und erstelle ein Grundgerüst für das Plugin.

Werbung

Mit $.fn.fussballtabelle habe ich meinem Plugin bereits einen Namen gegeben, den ich später für den Aufruf brauche. Die Variable opts enthält die Default Werte meines Plugins, welche ich hier noch nicht definiert habe, und die Werte (options), die beim Aufruf des Plugins übergeben werden.

Jetzt erweitere ich das Plugin um die Default Werte.

Die Werte sollten selbsterklärend sein. Dabei handelt es sich um die Positionen in der Tabelle, die andersfarbig markiert werden sollen.

Da das Plugin theoretisch mehrfach auf einer Seite vorkommen kann, wird jedes Vorkommen durchlaufen mit:

$this enthält das aktuell durchlaufenden Object.

Da jede Tabellenzeile innerhalb des TBODY eine Plazierung enthält, ermittel ich jetzt die einzelnen Tabellenzeilen.

In der Variable Teams stecken jetzt alle Tabellenzeilen mit jeweils einem Verein drin. Auch diese muss jetzt wieder durchlaufen werden um die <td> zu ermitteln und dieser die entsprechenden CSS Klasse zuzuweisen.

So. Das Plugin ist jetzt fertig. Fehlt nur noch der Aufruf in unserer HTML Datei. Dazu erstelle ich unter der Tabelle einen <SCRIPT> Block.

Das Endergebnis

So sieht dann die Ausgabe mit dem fertigen Plugin aus.

Über die Farben kann man natürlich streiten, aber diese sind leicht über das CSS zu ändern. Das fertige Tutorial Skript kann Das fertige Fussball Tabellen JQuery Plugin zum Download runtergeladen werden.

Hat dir der Beitrag gefallen? Dann würde ich mich sehr freuen, wenn du ihn weiterempfehlen würdest.Share on FacebookShare on Google+Tweet about this on Twitter

2 Gedanken zu „Eigenes JQuery Plugin programmieren – Tutorial

  1. Moin moin,

    danke für das tutorial,
    nur eine doofe Frage: wie übergebe ich dann meine werte? also wie überschreib ich die Defaultwerte?

  2. Hi,

    Danke für deine Frage. Du meinst für das Einfärben der entsprechenden Plätze?

    Einfach mit übergeben und zwar wie folgt:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.