jQuery Plugins

Ich beschäftige mich momentan mit der JavaScript Bibliothek jQuery. jQuery bietet viele Funktionen, die das Gestalten dynamischer Webseiten vereinfachen. Z.B. nutzt auch WordPress die jQuery Bibliothek.

Das Projekt mit dem ich mich beschäftige, ist sehr textorientiert, deshalb sollen alle Dialogfenster auf der Seite stets ausgeblendet sein, wenn man sie gerade nicht benötigt. Somit wird der Darstellungsbereich für den Text größer. Auf folgendem Screenshot wird das verdeutlicht:

Auf der linken Seite verdeckt ein Dialogfenster die Sicht auf den Text. Sobald man nun den Mauszeiger vom Dialogfenster nimmt, wird das Dokument wieder voll sichtbar. Klickt man auf einen Teil im Dokument oder auf eine Funktion, die das Dialogfenster benötigt, wird es wieder eingeblendet.

Dieses Verhalten könnte man nun mühsam für jedes Bedienelement, auf das man die Funktionalität anwenden möchten, ausprogrammieren. Eine elegantere Weise ist es, eine Plugin für jQuery zu schreiben.

Der Name meines Plugins lautet “hideous”. Wenn es geladen ist, reicht ein einfacher Aufruf von

$('#WindowID').hideous();

um einem Fenster mit einer ID bzw.

$('#WindowClass').hideous();

um einer Fensterklasse dieses “Verhalten” anzugewöhnen.

Das exakte einblende/ausblende Verhalten lässt sich desweiteren mit einigen Attributen beeinflussen:
Um z.B. das Plugin, wie in der Demo, mit Attributen auf die Klasse “.example” anzuwenden, verwendet man folgenden Code:

  $(".example").hideous(
  new Object({
    HIDETIME:300,
    TRANSPARENCY_FACTOR:0.15,
    VISIBILITY_FACTOR:0.75,
    FADEOUTTIME: 50,
    FADEINTIME: 50
  }));

HIDETIME legt die Zeit fest, wie lange das Element eingeblendet bleibt, wenn der Mauszeiger das Fenster verlassen hat.
TRANSPARENCY_FACTOR und VISIBILITY_FACTOR legen die exakte Transparenz fest. Bei 0.15 ist das Element nur noch zu 15% zu sehen bzw. zu 85% transparent!
FADEOUTTIME und FADEINTIME legen fest, wie lange der Effekt des Ein-/Ausblendens dauert.

In der folgenden Demo wird das Plugin auf eine Liste angewandt. Fährt man mit dem Mauszeiger über die Einträge, werden Sie für einen kurzen Moment hervorgehoben/eingeblendet.

Demo und Code

Achso, wenn ihr das verwenden möchtet, haltet euch bitte an die Lizenz oder meldet euch kurz bei mir:
Creative Commons Licence
Hideous jQuery Plugin by Alexander Wolf is licensed under a Creative Commons Attribution 3.0 Unported License.