Eigenes JQuery Plugin programmieren – Tutorial

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.

(function($) { 
$.fn.fussballtabelle = function(options) { 
var opts = $.extend({}, $.fn.fussballtabelle.defaults, options); 
}; 

$.fn.fussballtabelle.defaults = { }; 
})(jQuery);

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.

$.fn.fussballtabelle.defaults = { 
meister: {from: 1, to: 1}, 
cl: {from: 2, to: 3}, 
clquali: {from: 4, to: 4}, 
euro: {from: 5, to: 6}, 
relegation: {from: 16, to: 16}, 
abstieg: {from: 17, to: 18} 
};

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:

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

$this enthält das aktuell durchlaufenden Object.

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

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

// Vereine ermitteln
var elem = $this.find('tbody');
var Teams = elem.find('tr');

})

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.

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

// Vereine ermitteln
var elem = $this.find('tbody');
var Teams = elem.find('tr');

// Alle Tabellenzeilen mit einem Team durchgehen
Teams.each(function(index, data) {
var teamRow = $(this);
var teamCol = teamRow.find('td');
var position = index+1;

// Jede Tabellenzelle durchgehen
teamCol.each(function() {
// Gerade bzw. ungerade CSS Klasse zu td hinzufügen
if (position %2 ==0) {
$(this).addClass('even');
} else {
$(this).addClass('odd');
}

// Positionen ermitteln
if (position>=opts.meister.from && position<=opts.meister.to) {  
$(this).addClass('meister') 
} 
if (position>=opts.cl.from && position<=opts.cl.to) {  
$(this).addClass('cl') 
} 
if (position>=opts.clquali.from && position<=opts.clquali.to) {
$(this).addClass('clquali')
}
if (position>=opts.euro.from && position<=opts.euro.to) {
$(this).addClass('euro')
}
if (position>=opts.relegation.from && position<=opts.relegation.to) {
$(this).addClass('relegation')
}
if (position>=opts.abstieg.from && position<=opts.abstieg.to) {
 $(this).addClass('abstieg')
}
});
});
})

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.