Effekte mit der jQuery JavaScript Library

Hinweis: Dieser Artikel ist älter als zwei Jahre (letzte Änderung: 17. Dezember 2011) und evtl. nicht mehr aktuell.

Mit der jQuery JavaScript Library sind tolle Effekte möglich, wie z. B. Sliding, Fading, Animating etc.
Wir haben uns selber noch nicht viel mit jQuery befasst, wollen aber unsere ersten Versuche hier als Einstiegsanleitung niederschreiben.

Also zu erst muss die Library ins Template eingebunden werden. Entweder man lädt sich die .js Datei hier herunter und bindet sie anschließend so (am besten im Header) ein:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

oder man bindet z. B. direkt die von jquery.com ein:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

So, nachdem nun die Library eingebunden ist, können wir mit dem Javascript beginnen. Es läuft immer nach ähnlichem Schema.
Erst sagen wir, wir wollen eine Funktion:

$(document).ready(function()

Dann können wir bei Bedarf bestimmen, welches Element/Objekt bei Klick o. ä. die Änderung vornehmen soll:

$("button").click(function ()

Auf jeden Fall werden dann die Element/Objekte bestimmt, welche ihr Aussehen/Verhalten ändern sollen:

$("p").slideToggle

Als 1. kleines Beispiel lassen wir mit slideToggle alle Texte innernhalb eine p-Tags durch einen Button ein-/ausblenden:

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function () {
$("p").slideToggle("slow");
});

});
</script>

Um den Button nun sichtbar zu machen, ist es nötig diesen an die entsprechende Stelle (vorzugsweise direkt über den Text) anzulegen:

<button>Text ein-/ausblenden</button>

<p>
Hier steht der Text der nun ein- bzw. ausgeblendet werden kann.
</p>

So lässt sich z. B. auch eine Sidebar aus-/einblenden. Statt "p" nimmt man dann z. B. den Div-Container der Sidebar (z. B. "#sidebar").


Als 2. Beispiel wollen wir zeigen, wie z. B. die Kombination von mehreren Elementen/Objekte mit mehrfacher Veränderung möglich sind:

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function () {
$("div.block").add("p.extra").addClass("blau");
alert("Class in blau geaendert");
});

});
</script>

Alle Div-Container mit der Class ".block" und alle p-Tags mit der Class ".extra" bekommen eine neue Class ".blau" zugefügt und es wird ein Hinweistext ausgegeben. Statt addClass können auch andere Attribute, wie z. B. toggleClass genutzt werden.


Eine weitere Spielerei wäre ein FadeIn-Effekt bei allen Bildern die im Div-Container "#content" sitzen:

<script type="text/javascript">
 $(document).ready(function() {
 $("#content img").css("display","none");
 $("#content img").fadeIn(5000)
});
</script> 
wordpress

Weitere Effekte findest du in der jQuery-Documentation: http://docs.jquery.com/Effects


Ein kleiner Hinweis für WordPress-User:

WordPress bringt eine jquery.js im Verzeichnis /wp-includes/js/jquery/jquery.js mit. Falls ihr also damit arbeiten wollt ist eine kleine Abweichung zu beachten. Statt des $-Zeichen muss in WP jQuery benutzt werden:

<script src="http://www.deine_domain.xyz/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("button").click(function(){
jQuery("div.block").add("p.extra").toggleClass("blau");
alert("Class geaendert");
});

});
</script>

Falls ihr in WordPress nicht mit der WP eigenen jquery.js arbeiten wollt, könnt ihr diese deaktiveren und eine andere einbinden. Könnte sein, dass in eurer header.php, footer.php oder functions.php schon der Aufruf der jquery drin steht:

<?php 
wp_enqueue_script('jquery');
?>

Das dann wie folgt ändern bzw. hinzufügen, falls es noch nicht vorhanden ist:

<?php 
wp_deregister_script( 'jquery' ); //derigistriert die jquery von WP
wp_register_script( 'jquery', 'http://code.jquery.com/jquery-latest.js'); //registriert die jquery von der externen URL
wp_enqueue_script( 'jquery' ); //laedt die neue jquery
?>
Empfehle uns: email facebook google plus twitter

Artikel Informationen

  • Erstellt am Mittwoch, 12. August 2009 um 11:45 (Letzte Änderungen 17. Dezember 2011, 21:02) und abgelegt unter WordPress mit den Tags: ,
  • Kommentare zu diesen Eintrag im Kommentar Feed Feed.
  • Du kannst einen Kommentar hinterlassen. Pingback ist im Augenblick nicht erlaubt.

10
Hinterlasse einen Kommentar

7 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
  Abonnieren  
neuste älteste beste Bewertung
Benachrichtige mich zu:

Ich danke Dir für den Hinweis. Ist schon korrigiert!!

Herzlichen Gruß
Klaus

Diese kleine Spielerei mit dem Bild habe ich direkt mal auf meiner Website umgesetzt.
Sieht wirklich klasse aus.

Vielen lieben Dank und herzliche Grüße
Klaus

maxe

Danke, passt doch gut in die Site. Unten im Footer hast du noch einen Fehler (Leerzeichen) beim "© 2007-" drin ;-)

maxe

Danke Diros, ich hab unseren Artikel gleich um das "deaktivieren" der wp jquery ergänzt.

maxe sagt:
Vielleicht steht der Code auch noch in der functions.php deines Themes, da dann natürlich auch löschen.
wp_enqueue_script('jquery');

Ich habe rausgefunden. Wenn dir weiter hilft, der Lösung ist:

wp_deregister_script( 'jquery');

Ok! ich versuche es unter http://forum.wordpress-deutschland.org zufragen

maxe sagt:
Dafür sollte es reichen in der header.php deines Themes die Zeile

Hat nicht viel gebracht :-(

maxe

Vielleicht steht der Code auch noch in der functions.php deines Themes, da dann natürlich auch löschen. Evtl. steht auch noch sowas wie ... script type="text/javascript" src=" ... /includes/js/jquery.js ... in deinen Templates.
Falls alles nicht hilft, schilder dein Problem bitte mal dem WordPress-Forum: http://forum.wordpress-deutschland.org. Da kannst du dann auch mal den Code der header.php posten. Wir sind regelmäßig selber in diesem Forum aktiv wie hunderte andere auch die helfen können.

Hallo, wie kann ich aus Header Bereich JavaScript Includes entfernen
- "wp-includes/js/jquery/jquery.js"

Danke

maxe

Dafür sollte es reichen in der header.php deines Themes die Zeile
wp_enqueue_script('jquery');
auszukommentieren
//wp_enqueue_script('jquery');