Wenn du schon eine Weile in deinem Bereich arbeitest, wirst du warscheinlich ein ziemlich umfangreiches Portfolio besitzten. Um es ein wenig übersichtlicher zu gestalten, ist es sicherlich auch noch in einzelne Kategorien aufgeteilt. In diesem Tutorial werde ich das “Filtern der Kategorien” ein wenig interessanter machen mit ein klein wenig jQuery. Die Source Dateien zu diesem Tutorial findet ihr unter diesem Artikel zum kostenlosen Download.

Die Demo

Das Markup

Unser Portfolio ist nicht mehr, als eine simple unsortierte Liste.

	
A List Apart
	
Apple
	
CNN
	
Digg
	
ESPN
	
Facebook
	
Google
	
Netflix
	
NETTUTS
	
Twitter
	
White House
	
YouTube

Portfolio kategorisieren

In diesem Beispiel gehen wir davon aus, dass unser Portfolio vier Kategorien beinhaltet.

• Design
• Development
• CMS
• Integration
• Information Architecture

Nun weisen wir dem Portfolio Elementen die class unserer jeweiligen Kategorie zu. Soll also Bild A in der Kategorie Development angezeigt werden, so weisen wir dem Listen Element von Bild A die class development zu. Achtet darauf, die class`s klein zu schreiben.

	

		A List Apart
	

		Apple
	

		CNN
	

		Digg
	

		ESPN
	

		Facebook
	

		Google
	

		Netflix
	

		NETTUTS
	

		Twitter
	

		White House
	

		YouTube

Die Kategorie Navigation

Da wir nun unsere Portfolio Einträge haben, benötigen wir natürlich noch die Navigation um diese zu sortieren. Wir erstellen also eine weitere unsortierte Liste.

	
All
	
Design
	
Development
	
CMS
	
Integration
	
Information Architecture

Die CSS Datei

Da es in diesen Tutorial nicht um CSS geht, gehe ich diesen Teil schnell durch.

Zu allerst möchten wir die Kategorien horizontal sowie mit einem Rahmen betrachten.

ul#filter {
	float: left;
	font-size: 16px;
	list-style: none;
	margin-left: 0;
	width: 100%;
}
ul#filter li {
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}

Als nächstes möchten wir bei dem letzten Listen Element den Rahmen entfernen ( Für die Browser die es unterstützen ) sowie die Link Farbe ändern.

ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }

Außerdem möchten wir das Aussehen der aktuellen Kategorie verändern

ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

Unsere Navigation wäre damit abgeschlossen. Setzen wir unseren Fokus nun auf das eigentliche Kategorie Layout. Wir möchten, dass immer drei Portfolio Elemente nebeneinand angezeigt werden. Außerdem soll jedes Portfolio Element einen Rahmen bekommen.

ul#portfolio {
	float: left;
	list-style: none;
	margin-left: 0;
	width: 672px;
}
ul#portfolio li {
	border: 1px solid #dedede;
	float: left;
	margin: 0 10px 10px 0;
	padding: 5px;
	width: 202px;
}

Zu guter letzt kommen noch einige Basis Eigenschaften für die Links und Bilder.

ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }

Das geliebte jQuery

Ok, da wir nun unser Markup sowie unsere CSS Datei haben, kommen wir nun zum wichtigsten Teil dieses Tutorials: Dem Javascript
Wir starten mit dem einbinden der letzten jQuery Version in den Kopf Bereich unseres Dokumentes.

Als nächstes wollen wir unseren Code auszuführen, sobald das Dokument geladen ist.

$(document).ready(function() {
});

Wir möchten nichts tun, wenn keine Kategorie angeklickt ist. Außerdem wollen wir sicherstellen, dass wir nicht den Wert unseres href Links folgen. Wir benötigen also return false:

$('ul#filter a').click(function() {
	return false;
});

Sobald eine Kategorie geklickt ist, möchten wir ein paar Dinge machen: entferne die outline des geklickten Links, entferne die class des aktiven Listen Elements und füge die aktive class des geklickten Elternelements hinzu.

$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');

Als nächstes “nehmen” wir den text im geklickten Link, wandeln diesen in kleinbuchstaben um und ersetzen leerzeichen mit einem Bindestrich. ( Genau wie bei den Kategorien der Navigation )

var filterVal = $(this).text().toLowerCase().replace(' ','-');

Wenn der Navigations Link ALL geklickt ist, möchten wir alle Portfolio Elemente anzeigen sowie die class hidden entfernen.

if(filterVal == 'all') {
	$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
}

Nun kommt der wichtige Teil des Scriptes. Wir gehen durch jedes Portfolio Element und überprüfen ob die class gleich ist mit der Kategorie, die geklickt wurde. Wenn es nicht die class hat, dann möchten wir das Element ausblenden und die class hidden hinzufügen. Wenn es die class besitzt, möchten wir das Element einblenden und die class hidden entfernen.

else {
	$('ul#portfolio li').each(function() {
		if(!$(this).hasClass(filterVal)) {
			$(this).fadeOut('normal').addClass('hidden');
		} else {
			$(this).fadeIn('slow').removeClass('hidden');
		}
	});
}

Das fertige Script.

Werfen wir einen Blick auf unser fertiges Script.

$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
		var filterVal = $(this).text().toLowerCase().replace(' ','-');
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		return false;
	});
});

Falls euch der Artikel gefallen hat, abonniert doch bitte unseren kostenlosen RSS Feed.