Mit jQuery und jQuery UI deine Website mit Effekte aufpeppen
JQuery ist mittlerweile eines der beliebtesten Javascript Frameworks. Zusammen mit JQuery UI stellt es in einfachster Weise Animations und Interaktions-Funktionen für den Webmaster zur Verfügung. Hier ein kurzer jQuery Anfänger Kurs.
jQuery und jquery UI einbinden
Lade zuerst unter http://jquery.com die neueste Version von jquery (zur Zeit des Verfassens dieses Tutorials: jquery-1.4.2.min.js) herunter und kopiere diese Datei in dein Projekt Verzeichnis. Lade anschließend von http://jqueryui.com/download die neueste Version von jQuery UI herunter. Auf dieser Seite kannst du ein Style Theme für deine jQuery Widgets zusammenstellen. Für dieses Tutorial ist das nicht nötig, denn wir benötigen aus dem jQuery UI ZIP Archiv nur die Datei: jquery-ui-1.8.4.custom.min.js. Kopiere auch die Datei jquery-ui-1.8.4.custom.min.js in den Projekt Verzeichnis.
Erstelle nun eine HTML-Website mit folgendem Quelltext (habe hier der Übersicht halber den Doctype weggelassen):
Quelltext Website:
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
<style> hier den jeweiligen CSS Quelltext aus diesem Tutorial einfügen. Diese Zeile musst du natürlich entfernen! </style> <script type=“text/javascript“> $(document).ready(function() { hier den jeweiligen Javascript Quelltext aus diesem Tutorial einfügen. Diese Zeile musst du natürlich entfernen! }); </script> <title>jQuery Kurs</title> <body> Hier den HTML Quelltext aus diesem Tutorial einfügen </body> </html>
Erklärungen:
Mit $(document).ready(function() {….}); wird gewährleistet, dass jQuery die darin enthaltenen Funktionen erst ausführt, nachdem die Seite vollständig geladen ist. Das ist wichtig, da du ansonst versucht auf Objekte der Seite zuzugreifen, welche unter Umständen noch nicht geladen wurden!
So, nun zu unserem ersten einfach Objekt. Füge jeweils den HTML Quelltext im body deiner Website ein, den CSS und Javascript Quelltext in den entsprechenden Bereichen im head.
HTML Quelltext:
<div id="container"> <p>Hallo Welt</div> </div>
CSS Quelltext:
#container {
background-color:#0000FF;
position:relative;
width:200px;
height:100px;
}Ergebnis:
Hallo Welt
Das hat noch nichts mit jQuery zu tun. Wir haben nur eine blaue Box mit HTML und CSS erstellt.
Ab jetzt geht es mit jQuery los. Wir möchten, dass sich die Box verschieben lässt. Es soll eine verschiebbare Box, genau gleich wie ein Windows Fenster, erstellt werden. Die dafür benötigten jQuery Anweisung ist minimal. Füge einfach diese Anweisungen im head Bereich ein:
Javascript Quelltext:
$("#container").draggable();Ergebnis:
Hallo Welt
Mit dem $(„#container) selektieren wie das Objekt mit der id=“container“. Mit draggable() wir dieses Objakt dann verschiebbar gemacht. Vorraussetzung ist jQuery UI.
Damit der Benutzer auch versteht, dass die Box verschiebbar ist, habe ich im obigen CSS Abschnitt die Anweisung cursor:move; ergänzt. Dadurch wird der Mauszeiger zum Vierfachpfeil.
Wir möchten nun die Box mit einem Button langsam ausblenden. Wir benötigen dafür fogenden zusätzlichen HTML Quelltext:
Quelltext HTML:
<p><a href="#" id="buttonaus">aus</a></p>
und diesen Javascript Quelltext
Quelltext Javascript:
$("#buttonaus").click(function (e) {
e.preventDefault();
$("#container").hide("slow");
});Die Zeile e.preventDefault(); verhindert die normale Funktion des Klicks. Würde man diese Zeile weglassen, dann würde der Klick auf den Link, die Seite neue laden, da der Link auf die aktuelle Seite verlinkt.
Ergebnis:
Hallo Welt
Nun noch zwei Buttons fürs Einblenden und fürs Wechseln.
Quelltext HTML:
<p><a href="#" id="buttonein">aus</a> <a href="#" id="buttonwechsle">aus</a></p>
und diesen Javascript Quelltext
Quelltext Javascript:
$("#buttonein").click(function () {
$("#container").show("slow");
});
$("#button"wechsle).click(function () {
$("#container").toggle("slow");
});Ergebnis:
Hallo Welt
So jetzt noch einen Button mit dem man die Box 200 Pixel nach oben laufen und einen zweiten Button mit dem man die Box 200 Pixel nach unten laufen lassen kann.
Quelltext HTML:
<p><a href="#" id="buttonnachoben">nach oben</a> <a href="#" id="buttonnachunten">nach unten</a></p>
und diesen Javascript Quelltext
Quelltext Javascript:
$("#buttonnachoben").click(function () {
$("#container5").animate({"top": "-=200px"}, "slow");
});
$("#buttonnachunten").click(function () {
$("#container5").animate({"top": "+=200px"}, "slow");
});;Ergebnis:
aus ein wechsle nach oben nach unten
Hallo Welt
So das war es auch schon mit jQuery. Alles sehr einfach und kurz. Trotzdem ergeben sich durch diese wenigen Funktionen enorme Möglichkeiten das starre Webdesign zu brechen und dynamische Websites zu erzeugen.
Tipp zum absoluten positionieren der Box
Wenn du die blaue Box losgelöst von deinem Inhalt positionieren möchtest, dann benutze die CSS Anweisung position:absolute. Beachte, dass diese Anweisung sicht durchaus relativ verhält, solange du keine Anweisung top, left; right oder bottom zusätzlich verwendest.
CSS Quelltext zum absoluten Positionieren:
#container {
background-color:#0000FF;
position:absolute;
top:10px;
left:10px;
width:200px;
height:100px;
}