Nützliche jQuery PlugIns – meine Top 5

Inzwischen gibt es eine unüberschaubare Menge an PlugIns für jQuery, das wohl bekannteste Javascript Framework überhaupt. Solche PlugIns können einem Frontend-Entwickler enorm Zeit sparen, lediglich die Suche nach einem passenden kann manchmal etwas länger dauern.

In meiner bisherigen Trainee-Zeit bei MASSIVE ART habe ich bereits einige PlugIns angetestet bzw. aktiv verwendet. Hier möchte ich fünf PlugIns vorstellen, die – meiner Erfahrung nach – nützlich sind und die ich deshalb gerne öfters verwende. 

Seit der Einführung von CSS3 ist es möglich, einen Hintergrund durch „background-size: cover“ schön proportional innerhalb eines Elements zu strecken, egal welche Größe das Browserfenster hat. Leider unterstützen ältere Browserversionen wie der IE7 und IE8 diese Funktion nicht – hier kommt Backstretch zum Einsatz. Dieses PlugIn erledigt genau diese Aufgabe, beinahe perfekt. Eine mögliche Kombination mit „cover“ und dem backstretch-PlugIn als Fallback könnte folgendermaßen aussehen:

.perfect_background {
	background: url(images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Durch die Vielzahl an mobilen Geräten und den verschiedensten Auflösungen basieren immer mehr Websites auf „responsive Webdesign“. Hierbei wird entweder mit Media Queries oder mit Prozentangaben gearbeitet, damit die Website auf jedem Gerät gut aussieht. Manchmal kann es aber richtig knifflig werden, wenn es zum Beispiel um den Einsatz von Bildergalerien geht.

FlexSlider nimmt einem diese Arbeit ab und ist aktuell der beste responsive Slider, der mir bisher untergekommen ist. Egal welche Auflösung oder Browsergröße, die Bilder werden immer perfekt mitskaliert.

Dieses PlugIn ist meiner Erfahrung nach sehr weit verbreitet und ich bin mir sicher, dass es schon fast jeder auf einer Homepage gesehen hat. Durch Lightbox ist es möglich, jedes Bild in einer Art neuem Fenster zu öffnen, wobei alles um das Bild etwas abgedunkelt wird. Perfekt, um die größere Darstellung eines Thumbnails zu ermöglichen, da nicht auf eine neue Seite gewechselt werden muss.

Manchmal kommt es vor, dass eine Website einen großen Umfang hat und deswegen viel gescrollt werden muss. Angenommen, man erstellt einen Webshop mit vielen Produktbildern – da kann es schon mal vorkommen, dass die Ladezeit für eine bestimmte Zeit etwas länger ist als üblich. LazyLoad ermöglicht es, dass bestimmte Bilder der Seite erst geladen werden, wenn der Benutzer zu dieser bestimmten Stelle scrollt – somit verkürzen sich die Ladezeiten und es ist kein Problem, viele Bilder auf einer Seite darzustellen.

Bei der Validierung von Formularen ist es natürlich enorm wichtig, dass diese auch serverseitig stattfindet. Clientseitig kann es aber auch von Vorteil sein, dem Benutzer anzuzeigen, welches Pflichtfeld er vergessen hat, auszufüllen bzw. ihn darauf hinzuweisen, dass er eine ungültige E-Mail eingegeben hat. Validate ermöglicht dies unkompliziert und bietet auch die Möglichkeiten, die Auswertung selbst anzupassen.

Hier ein kurzes Beispiel, bei dem überprüft wird, ob das wiederholte Passwort gleich ist wie das normale Passwort. Ebenfalls blende ich die automatischen Errormeldungen aus. Dafür markiere ich mit „highlight“ die Felder, die falsch ausgefüllt wurden und umgekehrt mit „unhighlight“.

$("#awesome_form").validate({ 
	rules: {
		password: {
			required: true,
			minlength: 7
		},

		password_repeat: {
			required: true,
			minlength: 7,
			equalTo: "#password"
		}
	},
			
	errorPlacement: function(error, element) {},

        highlight: function(element) {
		$(element).parent().removeClass("success").addClass("error");
	}, 

	unhighlight: function(element) {
		$(element).parent().removeClass("error").addClass("success");
	}
});