Verlauf
erstellt von: 
Alle Kapitel anzeigen
voriges Kapitel
Im Gegensatz zu PHP, das vor allem anderen direkt am Server ausgeführt wird, wird JavaScript (nicht zu verwechseln mit Java) client-seitig im Browser des Users interpretiert. Eine der beliebtesten Javascript Bibliotheken nennt sich jQuery.
Im folgenden Tutorial Abschnitt folgt eine kurze Übersicht über die Arbeitsweise mit jQuery.
Wie jede Javascript Bibliothek muss innerhalb des Quelltextes einer Webseite auf die Bibliothek verwiesen werden. Dies kann auf zweierlei Arten erfolgen. Das jQuery Projekt wird unter anderem auf Google-Code „gehosted“ und kann so direkt (immer als aktuellste Version) in die Seite eingebunden werden. jQuery kann aber auch als lokale Datei verlinkt werden. Dazu muss die jQuery.js Datei als erstes von der Webseite www.jquery.com geladen werden. Gleich wie jede JS Datei muss diese über in das aktuelle HTML (oder PHP) Dokument eingebunden werden.
…script type="text/javascript" src="js/jquery-1.4.min.js">
Das jQuery Bundle beinhaltet alle grundlegenden Javascript Anwendungsbereiche, allerdings gibt es neben der normalen jQuery Bibliothek noch ein weiteres Projekt namens jQuery UI (UI für User Interface). Diese Erweiterungsbibliothek ermöglicht es leichter Benutzeroberflächen zu programmieren. Für unsere Desktop-Metapher bietet jQuery UI genau die richtigen Methoden und Funktionen für Drag&Drop Anwendungen.
jQuery UI lässt sich unter www.jqueryui.com downloaden.
…script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js">
Schlussendlich muss natürlich noch das eigene JavaScript in das aktuelle Dokument eingebunden werden.
…script type="text/javascript" src="js/scripts.js">
Um einen besseren Überblick über den Aufbau unseres Projekts zu bekommen, geben wir sämtliche JavaScript Dateien in ein eigenes „js“ Verzeichnis. (Selbiges gilt für CSS Dateien die wir in ein Verzeichniss „css“ geben)
Die Funktionsweise von jQuery
Den Vorteil den jQuery bietet, ist das Arbeiten mit CSS Selektoren innerhalb von Javascript. So kann ein HTML Element, z.B. eine Bilddatei mit $(“img“).machEtwas() angesprochen werden.
Wenn ein HTML Element eine bestimmte Klassenzuweisung oder eine ID besitzt, kann diese mit der gleichen Methode angesprochen werden.
HTML
CSS
#bezeichner { display : none }
jQuery
$(“#bezeichner“).css({ “display“ : “none“ });
jQuery bietet weiters die Möglichkeit mit vorgefertigten Methoden wie z.b. .hide() und .show() zu arbeiten. $(“#bezeichner“).hide(); macht in diesem Fall nichts anderes als $(“#bezeichner“).css({ “display“ : “none“ }); nur ist hide() um einiges kürzer in der Schreibweise.
When de DOM is ready …
jQuery bietet die $(document).ready(function(){ Funktion, die sicherstellt, dass alle Seiteninhalte bereits geladen sind bevor irgend ein Javascript Code ausgeführt wird.
Grundlegend wird jeder jQuery code in diese Funktion geschrieben.
$(document).ready(function(){
//hier folgt der Code
});
Bevor wir mit dem eigentlichen Codeabschnitt für unser Projekt in jQuery beginnen, werden wieder einige Variablen definiert.
Um sicherzustellen, dass alle Dateien unseres Miniportfolios auf unterschiedlichen Ebenen auf der Bühne liegen, definieren wir als erstes eine Variable z die für den z-Index jedes Elementes steht. Diese beginnt bei 0 und wird später beim Durchlauf durch alle Dateien jeweils um 1 erhöht. So wird sichergestellt, dass jedes Element einen anderen z-Index Wert hat.
var z = 0;
Da für unsere Desktop-Metapher kleine Miniaturbilder verwendet werden, definieren wir als erstes die Größe (Breite) der Miniaturen:
var small = '200px';
Beim MouseOver über ein Miniaturbild soll dieses auf auf die doppelte Breite animieren.
var full = '400px';
Wie jede Script- und Programmiersprache bietet auch jQuery eine Schleifenmethode mit der durch Arrays iteriert werden kann.
Jedes unserer HTML Elemente auf der Bühne hat einen Klassennamen “.thumb“.
Beim Ansprechen von .thumb liefert jQuery einen Array mit sämtlichen .thumb Elementen zurück. Jetzt kann mit der Methode .each() jedes Element gezielt angesprochen werden.
$(".thumb").each(
function() { …
Innerhalb der .each() Schleife soll sichergestellt werden, dass jedes Element eine zufällige Position innerhalb des Browserfensters zugeteilt bekommt. JavaScript Math.random() liefert eine Zufallszahl zwischen 0 und 0,999. Diese kann mit sowohl mit der Höhe des Fensters $(document).height() als auch mit der Breite $(document).width() multipliziert werden, um so eine beliebige Position innerhalb der Bühne zu bekommen. Da der zufällige Punkt immer die linke obere Ecke eines Elements beschreibt können wir noch grob 400px von der Browserbreite und Browserhöhe abziehen.
WICHTIG: Auch die Berechnung dieser Zufallspositionen muss innerhalb der .each() Schleife passieren, um gewährleisten zu können, dass bei jedem Durchlauf durch ein Element eine neue Zufallsposition generiert wird.
var l = Math.floor(Math.random() * ($(document).width()-400));
var t = Math.floor(Math.random() * ($(document).height()-400));
Als letztes muss jedem Element diese neue Zufallsposition zugeteilt werden.
$(this).css("left", l + 'px');
$(this).css("top", t + 'px');
Nun kann die .each() Schleife geschlossen werden.
Drag&Drop
Im nächsten Schritt kommt jQuery UI zum Einsatz. jQuery UI bietet unter anderem die einfache Methode .draggable() die auf ein Element angwendet werden kann, um dieses mit Drag&Drop Eigenschaften auszustatten.
$(".thumb").draggable({ containment: "window" });
Sobald $(".thumb").draggable(); im JS Code definiert ist lassen sich sämtliche Elemente die die Klasse .thumb zugewiesen haben über die Bühne ziehen. Zusätzlich bietet die Methode .draggable noch ein einen sehr praktischen Parameter namens containment. Ihm kann sowohl ein container (z.B. ein div) aber auch ein String wie z.B. "window"zugewiesen werden - mit "window" ist das aktuelle Browserfenster gemeint, also genau das was für unser Vorhaben benötigt wird.
Vergrößern der Miniaturbilder bei MouseOver
Wenn der User mit der Maus über ein Miniaturbild auf der Bühne fährt, soll dieses auf die doppelte Breite (400px) vergrößert werden. Beim Verlassen des Bildes mit der Maus soll die ursprüngliche Größe (200px) wieder hergestellt werden. jQuery liefert dafür eine passende Funktion .hover(). Diese Funktion besteht aus zwei Teilen, dem ersten MouseOver und dem zweiten MouseOut.
$(".thumb").hover(
function () {
//Was soll passieren bei MouseOver
},
function () {
//Was soll passieren bei MouseOut
}
}
Um dem User nicht ein abruptes Vergrößern der Miniaturen zu präsentieren, werden wir die Vergrößerung von klein auf groß animieren. Dafür hält jQuery wieder eine einfache aber sehr mächtige Funktion .animate() bereit, mit der so gut wie jede CSS Eigenschaft eines Elements auf einer Webseite animiert werden kann.
Im ersten Teil der .hover Funktion vergrößern wir auf die Variable full.
$(this).stop().animate({"height": full}, "fast");
Die Variablen full und small wurden anfänglich in unserem jQuery Code definiert.
Da wir allerdings nicht nur Bildmaterial in unserem Portfolio unterstützen sondern auch Textdateien und andere Formate müssen wir noch eine Ausnahme hinzufügen. Klassen, die NICHT auf die Animation anspringen sollen.
Die jQuery .not() Methode macht genau das. Außerhalb der .hover() Funktion können wir wieder eine Variable definieren, die all unsere Klassennamen enthält die nicht auf den Vergrößerungseffekt anspringen sollen.
$formats = '.text, .file, .video, .audio, .folder';
Dann setzen wir ein .not($formats) direkt vor die .animate() Funktion. So ist sichergestellt, dass alle .thumbs Elemente auf die .hover() Funktion ansprechen, allerdings nicht alle Elemente einen Vergrößerungseffekt zugeteilt bekommen. Dieser bleibt den Bildelementen vorbehalten.
Ein weiterer wichtiger Schritt innerhalb von .hover() ist das Erhöhen der anfänglich definierten z-Variable. So wird bei jedem MouseOver über ein Bühnenelement dieses um eine z-Index Ebene nach oben gesetzt.
Kosmetische Korrekturen und Feinheiten
Die Drag&Drop und die .hover() Eigenschaft der Miniaturbilder sorgt leider für eine kleine „Unschönheit“ im Userinterface unserer Webseite. Bei schnellen Mausbewegungen und gedrückter Maustaste über einem Bild, verlässt die Maus oftmals für sehr kurze Zeit das Miniaturbild und im nächsten Augenblick kommt schon wieder erneut die .hover() Funktion zum Einsatz. Dies führt zu einem leichten und schnellen Aufblitzen (Verkleinern und erneutes Vergrößern) der Bilder.
Um diesem „Bug“ entgegenzuwirken, deaktivieren wir einfach die .hover() Eigenschaft der Miniaturen bei einem Klick auf ein Miniaturbild. So wird während einem „Drag“ eines Objektes keine .hover() Funktion gefeuert. Erst beim Loslassen der Maus wird die .hover() Funktion wieder aktiviert.
Um eine Funktion zu deaktivieren nehmen wir die jQuery .bind() Funktion zur Hilfe. Sie ermöglicht es Event-Handler (wie z.B. .hover(), .mousedown(), .mouseup() oder .click()) an einen Selektor zu binden. So binden wir auf $(".thumb") einen mousedown Handler (gleich einem Click Handler) der sicherstellt, dass bei Klick auf ein Element, und somit dem eigentlichen Beginn des Drag-Ereignisses, die .hover() Eigenschaft eines jeden Miniaturbildes deaktiviert ist. Erst bei einem .mouseup() an einem Element soll die .hover()-Eigenschaft an alle Elemente gebunden werden.
$(".thumb").bind( "mousedown", function() {
$('.thumb').unbind('mouseenter mouseleave');
});
$(".thumb").bind( "mouseup", function() {
bind_hover();
});
Die gesamte .hover() Funktion packen wir daher einfach in einen normalen Funktionsaufruf den wir bind_hover() nennen.
Verhalten eines Ordners
Da unsere Desktopmetapher so perfekt wie möglich werden soll, müssen auch Ordner so gewöhnlich wie möglich funktionieren. Dafür bietet wieder jQuery die passende Methode .dblclick(), die es möglich macht Funktionsaufrufe mit einem Doppelklick zu feuern.
Da jeder Ordner ein normaler HTML Hyperlink ist, muss das normale Linkverhalten eines jeden unterbunden werden. .preventDefault() verhindert das normale Linkverhalten und einen neuen Seitenaufruf bei Klick auf einen Ordner.
Als kleiner "bugfix" kann hier noch auch bei Klick der z-index um eine Ebene nach oben gesetzt werden. Dieser Trick kann z.B. beim Verlieren des Fokus des Browserfensters von Vorteil sein.
$('.folder a').click(function(e) {
$(this).css('z-index', z);
z++;
e.preventDefault();
});
Somit steht einem Doppelklick-Event auf einen Ordner nichts mehr im Wege. Da der Hyperlink eines Ordners bereits auf den richtigen Pfad dieses Ordners verweist, kann mit der Methode .attr() das href Attribut des Links verwendet werden und mit window.location.href() der Aufruf dieses Ordners gefeuert werden. Im Detail sieht das so aus:
$('.folder a').dblclick(function(e) {
window.location.href = $(this).attr("href");
});
