200918Dez

Meerkat: Elegante Einblendungen mit jQuery

Es ist erstaunlich, was sich die Entwickler von jQuery-Plugins immer wieder einfallen lassen. Zur optischen Aufwertung oder Erhöhung der Benutzerfreundlichkeit sind JavaScript-Frameworks bestens geeignet. Man sollte stets eine Grenze bewahren, um nicht zu viele Effekte und Spielereien auf einer Seite zu platzieren.
Wenn es darum geht, zusätzliche Details oder aktuelle Informationen zu einem Inhaltselement zu präsentieren, bietet sich ein modales Fenster an, das mit jqModal realisiert werden kann. Eine weitere Lösung stellt das jQuery-Plugin "Meerkat" (Erdmännchen) dar, mit dem am unteren Rand des Browserfensters eine Informationsleiste eingeblendet werden kann.

jQuery-Plugin - Meerkat

Ich habe das Plugin zur Demonstration hier eingebunden. Der folgende Link startet eine Meerkat-Animation:

Meerkat-Demo

Ich bin Inhalt, der mit Meerkat eingeblendet wird.

Das kleine Script benötigt einen div-Container mit der ID "meerkat" — darin befindet sich der Inhalt, der eingeblendet werden soll. Dieses DOM-Element sollte per CSS (display:none;) versteckt werden.

Das Erdmännchen lässt sich einfach einbetten und konfigurieren.

  • meerkat({
  • close: ".close-meerkat",
  • meerkatPosition: "bottom",
  • animation: "slide",
  • animationSpeed: "slow",
  • height: "50px",
  • background: "#c0ffee"
  • });

Mit der "close"-Eigenschaft wird das Element festgelegt, welches den Meerkat-Container wieder schließt. Bei der Animation kann zwischen "slide" und "fade" gewählt werden, während als Position "bottom" oder "top" eingestellt werden kann. Mehr findet sich in der Dokumentation des Plugins. Mit Meerkat lassen sich übrigens auch Eingangsseiten (Intros) erstellen, die anschließend ausgeblendet werden. Das Plugin hat eine Größe von 4,8 KB und funktioniert aufgrund der Verwendung der CSS-Deklaration "position:fixed" nicht unter Internet Explorer 6.
Wirklich aufschlussreich bei diesem Projekt ist übrigens die Dokumentation der Plugin-Entwicklung, in der detailliert auf die einzelnen Schritte der Programmierung eingegangen wird.

UPDATE
Das Plugin wurde inzwischen eingestellt und steht leider nicht mehr zur Verfügung.

RSS-Feed abonnieren