Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Funktionsweise

Nach der Einbindung von jQuery und dem Clickbox PlugIn werden die einzelnen Elemente wie gewohnt zugewiesen:

$(document).ready(function() {
	$("div.news").clickbox();
});

Jetzt wird bei Mauskontakt der erste Link im Divcontainer gesucht und bei Klick an den Browser gesendet.
Außerdem erhält das Element die Klasse “hover” bei mouseover. Die Klasse kann auch geändert werden:

$(document).ready(function() {
	$("div.news").clickbox({hoverClass: "mo"});
});

Das Plugin bietet aber noch ein paar Extras:

Erstens: Mehrere Links

In einem Div Container können mehrere Links vorhanden sein und trotzdem(!) soll der ganze Bereich klickbar sein. Bei mir zum Beispiel die einzelnen Kisten mit neuen Einträgen auf der Startseite. Wenn man den Artikel aber schon gelesen hat, dann sollte man auch direkt zu den Kommentaren gelangen können. Möglich wurde das mit dem Clicktarget, welches beim Aufruf der jQueryfunktion mitgeliefert wird.

$(this).bind("click", function(event) {
	tar = $(event.target);
	[...]

In tar ist das angeklickte Element gespeichert. Dann prüfen wir ob es sich um einen Link handelt:

$link = tar.is('a') ? $(tar).attr("href") : firstLink;

Zweitens: Undefined

Es gab eine hässliche Weiterleitung nach “undefined” wenn kein Link im Container vorhanden war. Deshalb wird in der Variable firstLink erstmal ein Link vor dem weiterleiten gesucht und im Zweifelsfall nichts getan. Auch keine Mouseover Effekte!

Drittens: Tabellenzeilen

Das PlugIn arbeitet super mit Tabellen zusammen und lässt einfache Gestalltungsmöglichkeiten zu:

$(document).ready(function() {
	$("table.downloads tr").clickbox();
});

Damit wird jede Zeile zur Clickbox. Ein bisschen CSS zum verschönern, und fertig ist die Downloadliste!

table.downloads tr td {
	background:white;
	color:black;	
	cursor:pointer;
}
table.downloads tr.hover td {
	background:yellow;
}

Demo & Downloads

Die Clickbox in ihrer ganzen Klickbarkeit findet sich auf der Demoseite.

Und natürlich zum herunterladen, als Direktverlinkung.

Fragen und Anregungen sind herzlich Willkommen.