|
25 jQuery herunterladenUm mit jQuery arbeiten zu können, müssen wir uns die "libary" zu allerdigns downloaden und in unser HTML oder PHP Dokument einfügen. Hierzu gehen wir auf http://jquery.com/ und downloaden uns die neuste "PRODUCTION" Version von Jquery die etwa 20kb klein ist. In unserem Beispiel verwenden wir die Version 1.3.2 ( jquery-1.3.2.min.js ). Diese datei speichern wir in unserem Verzeichniss, wo auch unser zu bearbeitenes Dokument liegt. Für Xampp User z.B "C:xampphtdocsjquery" Nun öffnetn wir unser Dokument und includen unsere heruntergeladene jQuery Datei in unseren Head Bereich.<head>....Da wir unser jQuery Datei nun eingefügt haben, können wir auch gleich mit unserem ersten kleinen Javascript Befehlen arbeiten. In unserem ersten kleinen Effekt möchten wir gerne ein div Element ausfahren lassen, wie im folgendem Beispiel: Demo fadeOut Effekt Wir starten unsere erste FunktionFangen wir an. Zu allererst benötigen wir unser div Element uns einen Anker Link um das div Element zu öffnen.<body> ...Da unser div Element noch keine Eigenschaften hat, müssen wir nun noch einen kleinen CSS Code hinzufügen. In diesem Beispiel nehme ich eine unsauberere Variante, wie die Erfahrenen unter euch es merken werden. Allerdings ist es nur für unser Beispiel. Wir fügen also nun in unserem head Bereich einen kleinen CSS Code für unser div Element mit der ID "container" hinzu <head>...Nun folgen unsere ersten kleinen Javascript Befehle. Wir können ein neues Javascript Tag und sagen "Wir möchten eine neue Funktion" <head>...Erläuterung Mit $(function() { leiten wir eine Funktion ein. Innerhalb dieser Funktion sagen wir dem Script, was es zu tun hat. Wir sagen also nehme das Anker Tag <a>, wenn geklickt führe eine Funktion aus $('a').click(function() {. Nun müssen wir noch sagen, dass wenn a geklickt ist, fade das div mit der ID container aus. $('#container').fadeOut(); [caption id="attachment_47" align="aligncenter" width="300" caption="fadeOut Effekt Erläuterung"][/caption] Ihr könnt mit dem fadeOut auch ein wenig herumspielen, ersetzt dieses z.B durch hide, show etc. Eine Liste der Effekte die euch jQuery bietet findet Ihr in der offiziellen Dokumentation Kommentare (0)
Kommentar schreiben
|
test