Mein erstes jQuery Plugin.

Ich mag jQuery! In vielen Software-Projekten, findet man einen Wildwuchs an selbstgestrickten JavaScript „Lösungen“. Wenn man Probleme im Browser sauberer lösen möchte, so bietet sich jQuery, als einfaches aber auch mächtiges Werkzeug an. Ich habe es in einigen Projekten einsetzen können und es hat sich bisher immer bewährt. Aber das nur kurz zur Motivation. Im letzten Projekt hatte ich die Möglichkeit den Plugin Mechanismus, den jQuery bietet, sinnvoll einzusetzen. Wir hatten das Problem, das das
disabled Attribut für ein <a> nicht Browser Übergreifend konsistent dargestellt wird. Als Abhilfe habe ich jeweils zwei Varianten eines Links hinterlegt:
Einen normalen, aktiven Link Link und einen inaktiven Link
Der inactiveLink kann nun per css .inactiveLink{color:gray;} gefärbt werden.
Um nun nach gewissen Regeln einen Link aktiv zu schalten, müsste man sich ohne jQuery oder ohne jQuery Plugin entweder das gesuchte Element „merken“ (Stichwort:Dreicktausch), oder es müssten Elemente on-the-fly erzeugt werden. Diese Lösungen fand ich nicht schön, sondern ich wollte eine Lösung der Form
[js][/js] Das hält das Markup sauber!
Folgender Link zeigt sehr schön, wie man so etwas anstellt. Die Kernfunktionalität bildet folgender Schnipsel:
[js]$.fn.swapElements = function(options) {
debug(this);
var opts=options;
// element to be swapped with
$that=$(opts);
debug($that);
$that.show();
return this.each(function() {
$this = $(this);
debug($this);
// build element specific options
$this.hide();
});
[/js]
Hier passiert nicht viel: Das erste Element wird ausgeblendet und das zweite wird ausgeblendet. (Hmmm ich glaube ich sehe da grad noch einen kleinen Bug …)
Falls dies irgendwer nützlich findet, kann man das Plugin hier herunterladen.
Der letzte Trick besteht darin, das Plugin NACH der jQuery Bibliothek einzubinden.

Viel Spaß damit ;)

  1. Und wieso nicht einfach per .removeClass() und .addClass()? ;-) Oder verstehe ich da etwas nicht?

Schreibe einen Kommentar zu CG Antworten abbrechen

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