Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 1. August 2012

MiniJs: Kleine jQuery-Plugins für schönere Websites

Manchmal sind es die kleinen Dinge, die eine Website besonders machen. Gerade mit JavaScript kann ein Webprojekt an der ein oder anderen Stelle attraktiver und funktionaler gestaltet werden. MiniJs ist eine Suite, bestehend aus sieben nützlichen jQuery-Plugins, die schnell eingebaut sind und mehr als bloße Effekthascherei bieten.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren


MiniJs

Anzeige

Jedes der sieben Plugins von MiniJs ist separat verfügbar, sodass nicht unnötig viel Quelltext ins entsprechende Webprojekt eingebunden werden muss. Alle Plugins der Suite haben eines gemeinsam: Es sind keine weltbewegenden Features, sondern kleine und nützliche Funktionen.

Zähler, Slider und Dropdown-Menü

Die Bandbreite der MiniJs-Plugins reicht vom Wortzähler bis zum schicken Slider. Und jedes Plugin – so simpel die Funktionalität auch erst einmal klingt – ist zudem noch sehr individuell einstellbar. Hier ein Überblick über die sieben Funktionen:

Count
Der Counter zählt nicht nur Zeichen, Wörter und ganze Sätze bei Formular-Eingabefeldern. Es gibt auch die Möglichkeit, eine Mindest- und Höchstanzahl anzugeben. Wird diese Anzahl unter- oder überschritten, wird das über die Gestaltung des Feldes kenntlich gemacht.

Tipp
Dieses Plugin wandelt Title-Attribute beliebiger HTML-Elemente in schön gestaltete Tooltipps um. Hier gibt es zudem die Möglichkeit, das Einblenden der Tooltips erst bei einem Mausklick auszulösen, anstatt beim Hover, wie es bei Tooltipps sonst üblich ist.

Slider
Der Slider macht aus einzelnen Kindelementen eines Container-Elementes eine Slider-Animation, die sehr individuell einstellbar und gestaltbar ist. Autoplay, Einblendung einer Navigation und Animationsdauer sind ebenso einstellbar wie die Vergabe eigener Klassen zur individuellen Gestaltung des Sliders.


Standard-Slider

Notification
Dieses Plugin blendet per Mausklick einen Hinweis am oberen Rand des Browserfensters ein. Die Form der Darstellung (per Fade-in oder Slide-Animation) ist einstellbar. Optional kann der Hinweis mit einem Schließen-Button versehen werden.

Feed
Hierüber ist es sehr einfach, einen Twitter-Feed in ein Webprojekt zu integrieren. Auch diese Darstellung ist indivualisierbar, indem eigene Klassen vergeben werden und die einzelnen darzustellenden Elemente (Avatar, Tweet und Zeit) separat auswählbar sind.

Alert
Dieses Plugin funktioniert ähnlich wie das Notification-Plugin. In diesem Fall wird die Nachricht als Box an einer beliebigen Stelle der Website eingeblendet und kann per Klick ausgeblendet werden.

Dropdown
Mit dem Dropdown-Plugin wird aus einer verschachtelten Liste eine Navigationsleiste, bei denen Unterpunkte per Dropdown dargestellt werden. Die Einblendung der Dropdown-Elemente ist über das Plugin einstellbar.

Einfache Integration und Gestaltung

Das Einbinden der Plugins ist äußerst einfach. Das benötigte HTML-Gerüst ist auf ein Minimum reduziert. Beim Dropdown-Plugin reicht eine Liste, beim Slider reicht ein DIV-Element mit mehreren P-Kindelementen. Das Plugin selbst wird einem HTML-Element mit einigen wenigen Zeilen JavaScript zugewiesen, wie zum Beispiel beim Slider:

$("#slider").miniSlider({
 pauseOnHover: true,
 showNavigation: false,
 showPagination: false,
 delay: 500,
 transitionSpeed: 4000
});

Jedes Plugin bringt seine eigene CSS-Datei mit, welche die jeweilige Gestaltung der einzelnen Plugins beinhaltet. Viele der Klassen zum Gestalten einzelner Elemente können per Plugin verändert werden.

Die Plugins von MiniJs von Matthieu Aussaguel sind kostenlos einsetzbar und kommen mit einer ausführlichen Beschreibung daher, die das Einbinden und Anpassen einfach macht.

Fazit: Wer sein Webprojekt mit nützlichen Funktionen aufwerten möchte, sollte definitv einen Blick auf die Plugin-Suite MiniJs werfen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Da ist wirklich brauchbares dabei.
    Danke dafür!
    Nach ein paar Tagen fand ich nun auch Zeit meinen Favoriten auszuprobieren.
    Den Slider..
    Der Einbau in eine Webseite klappt problemlos.
    Mittlere HTML und CSS Kenntnisse reichen dazu völlig. Also auch bei weitem für nicht Profis geeignet.

    Leider kann man jedoch für die Bilder keine Bildunterschriften hinzufügen.
    Dann wäre der Slider perfekt.
    Denis, du hast nicht zufällig Lust, Mathieu diese Kleinigkeit noch einzureden? ;)

  2. Danke für den Tipp.
    werde das gleiche machen wie mein Vorredner :D

  3. Super Tipp, werde ich mir abspeichern. Danke!

Schreibe einen Kommentar

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