Diese Tipps liefern ein paar JQuery Tipps und Tutorials in deutsch zusätzlich zu JQuery Learning Seite. Auch jquery for Designers bietet einen guten Einstieg.
Meine ersten Themen verschaffen einen Überblick, so dass man einen ersten Eindruck bekommt und einiges ausprobieren kann. Weiter unten werden die Themen dann ausführlicher behandelt. Von daher erscheinen einige Themen im Menü doppelt.
Rechts im Menü geht es um JQuery Plugins. Das sind zustäztliche js Dateien die viele neue Möglichkeiten und Effekte bereitstellen.
Gehen Sie auf die JQuery Seite http://jquery.com/. Wählen Sie in der Navigation "Download". Dort ist von einer compressed Version und einer uncompressed Version die Rede. Die uncompressed Version sollte man nehmen, wenn man den JQuery Code verändern will. Die compressed Version hat eine kleinere Dateigröße. Sie enthält den gleichen Code ohne Leerzeichen, Zeilenumbrüche und Kommentaren. Er ist schwer zu lesen oder zu bearbeiten.
Desweiteren gibt es noch ein Migrate Plugin. Hier wird zusätzlich eine js Datei eingebunden. Sie sollte nach nach der eigentlichen JQuery js Datei eingebunden werden. Dadurch wird ermöglicht, dass auch älterer JQuery Code integriert werden kann.
Es gibt 2 Möglichkeiten
In welcher Reihenfolge und wo sollte der Code plaziert werden.
Wenn man den Scriptblock nach dem Einbindungscode am Ende der Seite notiert, wird er erst dann geladen wenn alles andere geladen ist. Beispiel
Um sicherzustellen, dass der Code erst dann ausgeführt wird, wenn alles geladen ist, gibt es eine spezielle Funktion, die den Code ausführt, sobald das möglich ist. Füge alles andere innerhalb dieser Funktion ein.
$( document ).ready(function() {// Your code here.});
Ich habe bei den einfachen Beispielen auf diese Funktion verzichtet, um den Code übersichtlicher zu halten. Es ist aber besser immer alles in diese (document).ready-Funktion einzubinden.
Außerdem ist es von Vorteil, den Code in einer extra Datei auszulagern, jedoch bei kleinen Beispielen macht es keinen Sinn.
Mit JQuery kann man auf Elemente der Html Seite mittels Selektoren zugreifen und diese dann mit JQuery Methoden versehen. Schauen Sie sich die ersten 5 Beispiele zum Thema Selektoren an. Im folgenden Beispiel wird allen Links das Stylesheet "myStyle" zugewiesen:
$( "a" ).addClass( "myStyle" );
Erstellen Sie ein CSS Regelset für eine Klasse.
.dark{background-color: #000; color: #999;}
Erstellen Sie in HTML ein paar Div Elemente.
<div > Hier steht irgendein Text.</div>
Weisen Sie mit der JQuery Funktion addClass() die Klasse allen div Elementen zu.
$("div").addClass("dark");
Definieren Sie ein paar CSS Eigenschaften für eine Klasse
.dark{background-color: #000; color: #999;}
Weisen Sie diese Klasse Elementen in HTML zu. Entweder wie zuvor beschrieben per JQuery oder per Hand im Quelltext.
Entfernen Sie die Klasse mit removeClass() . In meinem Beispiel wurde ein Div mit der id="ut" ausgwiesen und von diesem wurde die Klasse entfernt.
$("#ut").removeClass("dark");
Mit der text() Funktion kann man auf unkomplizierte Weise Text einfügen. Der Text wird als Parameter übergeben.
$("button").click(function(){
$( "div.info").text("Hoppla jetzt komm ich." );
});
Mehrere Funktionen kann man mittels Punktsyntax hintereinander aufführen.
$("button").click(function(){
$( "div.info").text("Hoppla jetzt komm ich." ).addClass("redCarpet");
});
An dieser Stelle folgt eine kleine Einführung in das Thema Event Handler. Weiter unten, wird das Thema ausführlich behandelt.
Event Handler definieren ein Ereignis. Das kann eine Useraktion sein oder auch so etwas wie ein abgeschlossener Ladevorgang. Versehen wir die beiden zuvor erstellten Beispiele mit Click Event Handlern, so dass die Anweisungen ausgeführt werden, sobald der User auf ein definiertes Element klickt.
Definieren Sie ein paar CSS Eigenschaften für eine Klasse
.dark{background-color: #000; color: #999;}
Wie im vorigen Beispiel werden ein paar div Elemente mit Text eingefügt.
Im Scriptblock wird nun folgender Code eingefügt.
$("div").click(function(event){$(this).addClass("dark");});
Schauen Sie sich genau an, wie die einzelnen Teile und Funktionen ineinander verschachtelt sind. In die Klammern der click Funktion wird eine anonyme Funktion eingefügt. Sie hat den Parameter event, dazu später mehr. In die geschweiften Klammern der Funktion werden alle Anweisungen eingefügt, die ausgeführt werden sollen. Hier ist noch das Schlüsselwort this zu nennen. Damit wird auf das Element zugegriffen, dem der Event zugewiesen wurde.
Im folgenden Beispiel habe ich 2 Buttons in einem Form Tag eingefügt. Sie haben unterschiedliche type Werte und werden, so über den entsprechenden Selektor angesprochen. Die Buttons sprechen ein Div Element mit der id="ut" an und weisen eine Klasse zu oder entfernen sie wieder.
$("input[type='button']").click(function(event){$("#ut").addClass( "dark" );});
$("input[type='reset']").click(function(event){$("#ut").removeClass( "dark" );});
Wenn ich voriges Beispiel mit einem input type="submit" Button machen würde, würde es nicht funktionieren. Da der Submit Button auch die Seite neu läd. Auch ein Event auf einem Link könnte Probleme bereiten, da ja auch die url aufgerufen würde. Mit folgender Funktion kann man das verhindern.
event.preventDefault();
Das vorige Beispiel mit einem submit Button könnte folgendermaßen realisiert werden. Hier habe ich auch einen anderen Selektor benutzt. Das hat aber keinen besonderen Grund.
$( "form :submit" ).click(function(event){
event.preventDefault();
$("#ut").addClass( "dark" );});
$( "form :reset" ).click(function(event){
$("#ut").removeClass( "dark" );});
JQuery stellt einige coole Effekte bereit. Animationen, langsames Ausblenden, etc. Im folgenden die Funktion hide() mit einem Parameter der die Geschwindigkeit bestimmt. Siehe auch Effekte
$( this ).hide( "slow" );
Doing something after an animation completes
Callback Funktionen werden aufgerufen, wenn eine andere Funktion abgelaufen ist. Eine Funktion wird als Parameter in der Elternfunktion übergeben und erst dann aufgerufen, wenn die Eltern Funktion ihre Anweisungen ausgeführt hat.
Wenn die Callback Funktion keine Parameter benötigt, kann man sie folgendermaßen übergeben. Der Funktionsname wird als Parameter übergeben. Nachdem die Seite mittels get() aufgerufen wurde, wird die Funkton myCallback aufgerufen.
$.get( "myhtmlpage.html", myCallBack );
Eine Callback Funktion mit Parameter muss in eine anonyme Funktion gepackt werden. Folgende Schreibweise funktioniert nicht.
$.get( "myhtmlpage.html", myCallBack(param1, param2));
Stattdessen wird eine anonyme Funktion eingefügt. Darin befindet sich die Callback Funktion mit Parametern. Achten sie genau auf die Klammern und die Verschachtelung.
$.get( "myhtmlpage.html", function() {myCallBack( param1, param2 );});
Im folgenden Beispiel wird eine anonyme Funktion in einem weiteren Parameter angehängt. Das Ganze ist eine Event Handler Funktion eingebunden.
$('#clickme').click(function() {
$( "div.foo" ).fadeToggle( 1200, function(){//Animation beendet} );
});
Es folgt eine komplette Callback Funktion mit Anweisung.
$('#clickme').click(function() {
$( "div.foo" ).fadeToggle( 1200, function(){ $( "div.info").text("Hoppla jetzt komm ich." );} );
});
Mit dem Schlüssewort this, kann man auf das DOM Element zugreifen, welches animiert wird.
$('#clickme').click(function() {
$( "div.foo" ).removeClass("redCarpet").fadeToggle(
1200, function(){ $( this).addClass("redCarpet" );} );
});
Selektoren werden gebraucht, um die Anweisungen bestimmten Elementen zuzuweisen. Einige Selektoren sind den CSS Selektoren ähnlich.
Hier die dazugehörige Seite bei JQuery. Die Infos zu den Pseudo Selektoren, sind dort ausführlicher erklärt.
$( "#myId" ); // id.
$( ".myClass" ); // Klasse
$( "input[name='first_name']" ); //Attribut mit Wert, langsam in alten Browsern
$( "#contents ul.people li" ); //zusammengesetzter Selektor
Beispiel Selektor zusammengesetzt
$( "a.external:first" ); //Pseudo Selektor
$( "tr:odd" ); //Pseudo Selektor
$( "#myForm :input" ); //Pseudo Selektor alle input Elemente in form
$( "div:animated" ); //alle animierten div
$( "div:visible" ); //alle sichtbaren div Elemente, es ist keine CSS Eigenschaft visibility oder display
Benutzt man einen Selektor öfter sollte man ihn in einer Variablen ablegen, anstatt ihn immer wieder aufzurufen.
var kasten = $("div");
So wird die Variable aufgerufen.
kasten.addClass("foo");
Es ist unproblematisch, wenn der Event und die Aktion auf das gleiche Element angewendet werden. Wenn man jedoch Events bestimmten Objekten zuweist und die Aktionen auf irgendwelche anderen Elemente angwendet werden sollen, kann man diese Verknüpfung über einen Ankerlink realisieren. Das Objekt auf das geklickt wird, bekommt ein href Attribut und das Element auf welches die Aktion angewendet werden soll, bekommt den gleichen Wert als id.
$('#clickme').click(function(event) {
curElm = $(event.target).attr("href");
$(curElm).slideUp( 1200 );
console.log(curElm);
});
so sieht's aus | Beispiel 2 | Beispiel 3 | Beispiel 4 | Beispiel 5 | Beispiel 6 | Beispiel 7 |
Folgende Vorgehensweise funktioniert nicht, weil die if Abfrage immer true zurück gibt auch wenn es das Element nicht gibt.
f ( $( "div.foo" ) ) { ... }
Die length Eigenschaft von Selektoren gibt zurück, wieviele Elemente ausgewählt sind. Darüber lässt sich leicht überprüfen, ob es überhaupt ein Element gibt. Der Wert 0 ist hier gleichbedeutend mit false.
if ( $( "div.foo" ).length )
{ ...}
so sieht's aus
JQuery und CSS bieten ein paar Möglichkeiten Selektoren zu filtern oder genauer zu bestimmen.
$( "div.foo" ).has( "p" ); // div.foo Element die <p> Tags enthalten$( "h1" ).not( ".bar" ); // h1 Elmente die nicht die Klasse bar haben$( "ul li" ).filter( ".current" ); // unordered list Elemente mit der der Klasse current$( "ul li" ).first(); // das erste unordered list Element$( "ul li" ).eq( 5 ); // das sechste
Gerade bei Form Elementen braucht man oft genauere Filtermöglichkeiten. Es folgen einige Beispiele, doch vorab noch folgender Hinweis: Beachten Sie, dass man viele Beispiele auch mittels filter auswählen könnte, indem man zuerst einen Selektor benutzt und dann mittels filter eine genauere Auswahl trifft.
$( "form.form1 input" ).filter( ":button" )
Form Element mit type="button"
$( "form :button" );
input Element mit type="checkbox".
$( "form :checkbox" );
Ausgewählte Checkboxen oder Radiobuttons
$( "form :checked" );
Alllej input Elemente innerhalb eines Formulars mit dem standalone Attribut disabled
$( "form :disabled" );
Das Gegenstück zu disabled
$( "form :enabled" );
options Elemente mit selected
$( "form :selected" );input type="text"
$( "form :text" );
input type="file"
$( "form :file" );
input type="image"
$( "form :image" );
input, textarea, select, button
$( "form :input" );
input type="password"
$( "form :password" );
input type="radio"
$( "form :radio" );
ein Satz Radiobuttons
$( "form input[name='gender']:radio" );
input type reset
$( "form :reset" );
input type submit
$( "form :submit" );
this und children und JQuery this keyword
Mit dem Schlüsselwort this kann man das Objekt ansprechen, welches die Funktion aufgerufen hat.
$( "p" ).on( "click", function() {
$(this).addClass("foo");
});Wenn man ein Objekt ansprechen will, welches ein Nachkomme von this gibt es verschiedene Möglichkeiten. Nehmen wir als Beispiel ein div und darin befindet sich ein img, welches wir ansprechen wollen.
Die ersten beiden Beispiele sprechen Nachkommen von this an.
$("img", this) Beispiel
$(this).find("img")Beispiel
Wenn es ein Kindelement ist, also ein direkter Nachkomme.
$(this).children("img")Beispiel
JQuery Events kurze Einführung siehe oben
Webseiten oder auch Programme haben sehr viel mit Ereignissen (Events) zu tun. Zum Beispiel, wenn ein User auf einen Button klickt, oder einen Text eingibt, die Maus bewegt oder die Seite scrollt. Neben den User Events gibt es auch andere Events, wie beispielsweise die Überwachung oder das Ende von Ladevorgängen. Das Ende oder die Pause eines Abspielvorgangs bei einem Video oder einem Sound. In all diesen Fällen werden Events oder Ereignisse abgesendet, auf die man wartet oder horcht (listen), um entsprechend darauf zu reagieren. Hier spricht man von Event Listenern.
Es finden also viele Events statt, aber man wird nur über ein Event benachrichtigt, wenn man auf das Event lauscht (listen). Ein Event Listening bedeutet also, man wartet auf die Benachrichtigung, dass ein Event eingetreten ist. Dann kann man entsprechend darauf reagieren.
Welche Reaktion stattfinden soll, definiert man in einem sogenannten Event Handler. Das ist eine Funktion, die ausgeführt wird, wenn das Ereignis eintritt.
<button onclick="alert('Hello')">Say hello</button>
In diesem Beispiel ist onclick das Ereignis (Event) auf das gewartet wird (listen) und alert('Hello') der Event Handler. Den Code auf diese Art zu schreiben, hat viele Nachteile. Der Code wird direkt mit dem HTML verbunden. Wenn man es auf andere Elemente anwenden wollte müsste man es an zig Stellen neu notieren. Ein bessere Möglichkeit wäre dem Button eine id zuzuweisen.
<button id="helloBtn">Say hello</button>
Nun kann man in einer separaten Script Datei über einen Click auf den Button benachrichtigt werden und darauf reagieren.
var helloBtn = document.getElementById( "helloBtn" );helloBtn.addEventListener( "click", function( event ) {alert( "Hello." );}, false );
Hier wird über das DOM auf den Button zugegriffen und ein Verweis in der Variablen helloBtn gespeichert. Im zweiten Schritt, wird dem Button eine addEventListner Funktion angehängt. Achten Sie auf den Aufbau. Der erste Parameter ist das Ereignis "click". Der zweite Parameter ist eine anonyme Funktion.
function(event){Anweisungen....}
Das ist normales Javascript und hat mit JQuery noch nichts zu tun. Das kann man in moderenen Browsern so einsetzen. Allerdings macht IE 9 oder tiefer Probleme.
Hier bietet JQuery eine Alternative, wobei die Browserunterschiede berücksichtigt werden.
$( "#helloBtn" ).on( "click", function( event ) {
alert( "Hello." );
});
Es gibt in JQuery verschiedene Arten Event Listener und Handler zu erstellen. Ich will hier nur 2 Arten erwähnen, eine einfache und eine on- Methode, mit der man die Möglichkeit hat direkt auf die ursprünglichen Events der Browser zuzugreifen. Die on Methode sollte bevorzugt werden. Bedenken Sie dass bei der on Methode die Objekte vorhanden sein müssen, wenn der Event zugwiesen wird.
Einfache Methode
$( "p" ).click(function() {console.log( "You clicked a paragraph!" );});
Das Äquivalent mit der on Methode
$( "p" ).on( "click", function() {console.log( "click" );});
Jeder Event enthält ein Event Objekt, mit dem man auf allerlei Eigenschaften des Events zugreifen kann. Was es für Eigenschaften gibt, hängt vom Event ab. Dieses Event Objekt ruft man über einen Parameter auf. Den Namen können Sie selbst vergeben. Es ist Konvention ihn event zu nennen, wie im folgenden Beispiel.
....function(event).....
Im folgenden Beispiel wird die Event Objekt Methode preventDefault() aufgerufen. Weitere Eigenschaften und Methoden werden unten aufgeführt, siehe dazu auch die DokumentationProbieren Sie die verschiedenen Eigenschaften und Methoden mittels Konsole log aus.
event.preventDefault();
Standardverhalten unterbinden
Über das Event Objekt wird die Methode preventDefault() aufgerufen, um das normale Verhalten abzublocken.
Die komplette Funktion
$( "a" ).click(function(event)
{
alert( "Dieser Link geht nicht mehr nach JQuery." );
event.preventDefault();
}
);
pageX pageY
Mausposition ermitteln
Bei MouseEvents werden x- und y- Position des Cursors ermittelt. Sie werden von der linken oberen Ecke des Browserfensters gemessen.
$( "div" ).on( "mousemove", function( event ) {
$( ".info" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
type
Die Art des Events z.B: "click". Das kann man gebrauchen, wenn man mehrere Events definiert hat, welche die gleiche Funktion aufrufen.
which
Der Button oder die Taste die gedrückt wurde.
data
übergebene Daten
currentTarget
Das Objekt auf den der Event Listener registriert wird entspricht dem Schlüsselwort this
Das Dom Element, dass den Event ausgelöst hat
Beispiel aber nicht das Element auf den der Event Listener registriert ist.
In dem unten aufgeführten Code gibt es noch ein Problem, denn wenn man einen Unterpunkt anklickt, wird das Menü auch zu geklappt, denn auch ein Element in der untergeordneten Liste entspricht dem Selektor li mit dem Klassennamen unterMenue.
$( ".unterMenue" ).click(function(event) {
$(this).children("ul").slideToggle( 1200 );
});
Die Lösung des Problems ist eine Überprüfung mittels target. Denn damit wird zurückgegeben auf welches Element genau geklickt wurde. Nun gibt es 2 Möglichkeiten ich überprüfe in einer if Struktur ob das target eine unterschiedliche Eigenschaft hat. Menü 1
$( ".unterMenue" ).click(function(event) {
if (event.target.nodeName == "LI") {
$(this).children("ul").slideToggle( 1200 );
}
});
Selbstverständlich kann man die Überprüfung auch auf andere Art vornehmen. Die Listelemente, die das Menü aufklappen, sind nicht mit einem href Attribut versehen. Das wird im folgenden Beispiel überprüft.
$( ".unterMenue" ).click(function(event) {
var elementClicked = $(event.target).attr("href");
if (elementClicked == undefined) {
$(this).children("ul").slideToggle( 1200 );
}
console.log(elementClicked);
});
In diesem Beispiel wird die untergeordnete Liste des angeklickten Elements getoggelt. Vergleiche den Code mit ersten Beispiel dieses Themas. Da ein Klick auf einen Unterpunkt keine untergeordnete Liste hat, wird auch keine getoggelt. Menü 3 beste Lösung
$( ".unterMenue" ).click(function(event) {
$(event.target).children("ul").slideToggle( 1200 );
});
Mehrere Events auf einem Element, die die gleiche Funktion aufrufen, kann man in einer on- Funktion mit Leerzeichen hintereinander aufführen.
$( "input" ).on(
"click change", // binde Listener an mehrere Events
function() {
console.log( "ein input hat click oder change Ereignis erhalten" )
}
);
Hat man mehrere Events auf einem Objekt, wobei jeder Event eine andere Event Handler Funktion aufrufen soll, kann man in die on Funktion ein Objekt mit einem key:value Paar einfügen. key ist das Ereignis und der Wert eine anonyme Funktion
$( "p" ).on(
{
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" );}
});
so sieht's aus
Mit der .hover Funktion kann man eine oder zwei Funktionen aufrufen, die beim Berühren und beim Verlassen des Mauszeigers ausgeführt werden. Wenn man nur eine Funktion zuweist, wird diese für beide Events ausgeführt. Wenn man 2 Funktionen zuweist, wird die erste für das Berühren/ Betreten und die zweite für das Verlassen mit der Maus ausgeführt. Das ist die Kurzschreibweise für 2 Event Handler.
$( selector ).hover( handlerIn, handlerOut );
$( "div" ).hover(
function() {
$( this ).addClass( "greenGras" );
}, function() {
$( this ).removeClass( "greenGras" );
}
);
Hier ein ähnliches Beispiel mit einer Animation
$( "div" ).hover(
function() {
$( this ).animate( {opacity: 0.1}, 1000);
}, function() {
$( this ).animate( {opacity: 1}, 1000);
}
);
so sieht's aus
Hier noch ein etwas komplexeres Beispiel.
Tearing down Event Listener
Man kann einen Event Listener mit der off Funktion entfernen.
$( "p" ).off( "click" );
Hat man mehere Event Listener zugewiesen und möchte eine bestimmte Event Handler Funktion entfernen, kann man diese als zweiten Parameter der off Funktion zuweisen.
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar ); // foo ist noch an den Click Event gebunden
Wenn man einen Event nur einmal aufrufen will, kann man dazu die one- Funktion einsetzen. Das Beispiel bedeutet, dass jeder Absatz, den man anklickt, die Funktion einmal aufruft. Klickt man ein zweites mal auf den Absatz, wird die zweite Funktion aufgerufen.
$( "p" ).one( "click", firstClick );function firstClick() {console.log( "Sie haben hier das erste mal geklickt!" );// Setzen Sie hier weitere Event Handler für nachfolgende Klicks.// Wenn keine weiteren Event Handler benötigt werden, lässt man diesen Schritt aus.$( this ).click( function() { console.log( "Hier wurde schon mal geklickt!" ); } );}
Mit JQuery lassen sich viele Effekte auf einfache Art realisieren. Man kann CSS Eigenschaften animieren und vieles mehr. Man kann Elemente ausblenden im Sinne von display: none. Man kann Callback Funktionen verwenden, die nach Beendigung des Effekts ausgeführt werden.
Mit der hide Funktion kann man Element ausblenden. Hier wird nicht eine Transparenz Eigenschaft auf 0 gesetzt, sondern die display Eigenschaft bekommt den Wert none, so dass das Element nicht mehr vorhanden ist und die anderen Elemente nachrücken.
Man kann hier die Parameter ' slow', 'normal',' fast' oder einen Wert in Millisekunden einsetzen 200 einsetzen.
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});
Im folgenden Beispiel werden alle div Elemente mit der Klasse hidden eingeblendet. Sie haben die CSS Eigenschaft display:none
$('#clickme').click(function() {
$( "div.hidden" ).show( 1250 );
});
Wenn man sich die Beispiele anschaut, sieht man, dass hier nicht nur etwas verschwindet oder eingeblendet wird, sondern dass auch ein Versatz stattfindet. Dieses Gleiten oder Slide Effekte lassen sich mit anderen Funktionen genauer bestimmen.
slideUp() slideDown() fadeOut() fadeIn()
Mittels slideUp() werden die Elemente ausgeblendet und nach oben geschoben. Ein optimaler Effekt für ein Menü.
$('#clickme').click(function() {
$( "div.shown" ).slideUp( 1200 );
});
Mittels slideDown() gleiten die Elemente nach unten während sie gleichzeitig eingeblendet werden.
$('#clickme').click(function() {
$( "div.hidden" ).slideDown( 1200 );
});
Der Inhalt wird langsam eingeblendet, es findet kein animiertes Gleiten statt.
$('#clickme').click(function() {
$( "div.hidden" ).fadeIn( 1200 );
});
Der Inhalt wird langsam ausgeblendet, es findet kein animiertes Gleiten statt.
$('#clickme').click(function() {
$( "div.shown" ).fadeOut( 1200 );
});
Im folgenden Beispiel habe ich die Methode fadeIn() und hide() kombiniert, um bestimmte Inhalte einzublenden.
Allerdings ist das nicht ganz optimal gelöst, denn eigentlich sollte hier eine Callback Funktion zum Einsatz kommen, so dass erst ausgeblendet und dann eingeblendet wird.
In Menüs oder Accordion Elementen braucht man eine Möglichkeit zwischen ein- und ausblenden hin und her zu schalten. Das lässt sich mit folgenden Funktionen erzeugen. toggle() , slideToggle(), fadeToggle()
$('#clickme').click(function() {
$( "div.foo" ).fadeOut( 1200 );
});
slideToggle() entspricht den Funktionen slideUp() und slideDown()
$('#clickme').click(function() {
$( "div.foo" ).slideToggle( 1200 );
});
Das folgende Beispiel bezieht sich auf eine verschachtelte ul Liste. Die li Elemente in denen eine untergeordnete Liste enthalten ist bekommen eine Klasse unterMenue zugewiesen. Siehe hierzu auch den Tipp Event Object target
$(".unterMenue").click(function() {
$(event.target).children("ul").slideToggle( 1200 );
});
fadeToggle() entspricht den Funktionen fadeIn() und fadeOut()
$('#clickme').click(function() {
$( "div.foo" ).fadeToggle( 1200 );
});
JQuery stellt einige Funktionen bereit, um Animationen zu steuern.
Mit der delay() Funktion kann man eine Verzögerung einbauen, die zwischen aufeinanderfolgenden Animationen eingefügt werden soll.
$( "div.shown" ).hide( 5000 ).delay( 500 ).show( 5000 );
Mit der stop() Funktion kann man eine laufende Animation stoppen. In diesem Falle werden alle laufenden Animationen gestoppt.
$(document).ready(function() {
$( "#clickme" ).on( "click", function() {
$( "body *" ).filter( ":animated" ).stop();
})
$( "div.shown" ).hide( 5000 ).delay( 500 ).show( 5000 );
});
Mit der animate() Methode kann man CSS Eigenschaften animieren. Man kann jedoch keine Farben animieren.
$( "div.funtimes" ).animate({
left: "+=50",
opacity: 0.25
},
3000, // Dauer
function() { // Callback Funktion nach Ende der Animation
$( "div.funtimes" ).text("Animation beendet");
}
);
Eine Animation kann gleichmäßig verlaufen oder die Geschwindgkeit kann sich über den Zeitraum hinweg verändern. Für dieses sogenannte Easing gibt es Schlüsselwörter, wie swing und linear. Mit dem Easing Plugin, stehen eine Vielzahl von Easing Funktion bereit. Liste der Easing Funktionen Auch diese Seite bietet ein schöne Probiermöglichkeit.
$( "div.funtimes" ).animate({
left: ["+=150", "linear"],
opacity: [0.25, "swing"]
},
3000, // Dauer
function() { // Callback Funktion nach Ende der Animation
$( "div.funtimes" ).text("Animation beendet");
}
);
Man kann ohne zusätzliches Plugin zu einem Anker innerhalb der Seite scrollen.
Als erstes muss ein Anker am Anfang der Seite direkt hinter das body Element gesetzt werden, der die id mit Wert top bekommt. <a id="top"></a>
Desweiteren werden die üblichen Anker zu den Sprungzielen gesetzt. <a id="sprungziel"></a>
Dann werden Links zu den Ankern gesetzt. Diese Links, also die <a> Elemente, die auf die Anker verweisen, bekommen folgende Klassezuweisung <a href="#sprungziel" class="scrollPage">link</a>
Dann wird im Scriptblock unten aufgeführte Funktion notiert. Der Wert 1500 in dem Beispiel ist die Geschwindigkeit in Millisekunden.
$('.scrollPage').click(function(event) {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 1500 );
event.preventDefault();
});
Der erste Anker mit der id="top" wird benötigt, um Entfernungen zu berechnen.
event.preventDefault()
siehe hier
jQuery UI diesen Link findet man direkt auf der jQuery Homepage. UI steht für User Interface. Hierbei handelt sich um js Dateien, die wie die Plugins auf der Grundlage der jQuery Programmierung basieren. Es gibt ein Einsteiger Tutorialund eine Demo Seite. Auf der Download Seite hat man die Möglichkeit, sich die js Dateien an die eigenen Bedürfnisse anzupassen. Dort wählt man die gewünschten Funktionen aus, auch CSS Themen kann man wählen und die Version. Wichtig ist hier auch die Version der jQuery Dateien, die man benutzt. Dann kann man die Dateien herunterladen. Die UI js Dateien müssen nach den jQuery js Dateien eingebunden werden.
In der Datei befindet sich im Unterordner external/jquery die jQuery js Datei. Diese oder eine andere jQuery Datei kommt zuerst.
Dann folgt die Einbindung der jquery-ui.js oder der komprimierten Version jquery-ui-min.js
Die CSS Datei heißt jquery-ui.css
Für das CSS gibt es den Theme Roller Generator. Hier wählt man alle gewünschten Einstellungen aus und lädt sich die fertige CSS Datei herunter.
Im folgenden ein Accordion, welches man als Menü oder auch als aufklappbare Infotexte verwenden kann. Es gibt ein umschließendes Blockelement, welche eine Id oder eine Klasse zugewiesen bekommt und im Script dann über den Selektor angesprochen wird. Innerhalb dieses Blockelementes werden abwechselnd die Menüpunkte und die Aufklappelemente aufgeführt. Beides sind Blockelemente.
<div id="accordion">
<div>Menüpunkt</div>
<div>AufklappElement</div>
<div>Menüpunkt</div>
<div>AufklappElement</div>
</div>
Das Script
$( "#accordion" ).accordion({collapsible: true});
Ein eigenes CSS ist manchmal leichter zu handhaben, als ein fremdes.
Standardmäßig ist immer eine Container offen. Durch die Option collapsible: true (siehe Code Snippet) kann man alle Elemente schließen.
Durch {heightStyle: "fill"} enthalten die Container, die Höhe des Elternelementes. Mehrere Eigenschaften werden mit Komma getrennt in die geschweiften Klammern notiert.
Durch {heightStyle: "content"} erhält jeder Container, seine natürliche Höhe.
Man kann die Container auch durch Mausberührung aufklappen. die Eigenschaft ist:
event: "click hoverintent"
Hiermit kann man aus einer verschachtelten ul Liste eine Aufklappmenü erstellen. Auch mehrfach verschachtelt ist möglich.
Das umgebende ul Element bekommt eine id. Diese wird mit folgendem Script angesprochen.
$( "#menu" ).menu();
Als UI Style wird hier das jquery-ui.theme.css zum Einsatz. Desweiteren muss man dem Menü ein e Breite geben. Der Klassenname ist nicht frei vergeben, sondern bezieht sich auf die Programmierung.
.ui-menu { width: 150px; }
Man kann einzelne li- Elemente deaktivieren, indem man ihnen folgende Klasse zuweist.
class="ui-state-disabled"
jQuery UI Tabs / jQuery UI Tabs Api
Mit den ui Tabs kann man Inhalte in anklickbaren Tabulatoren unterbringen. Das Script verweist auf eine id, die einem umgebenden Blockelement div zugewiesen wird.
$( "#tabs" ).tabs();
Hier wird die jquery-ui.css benötigt.
Darin erscheint als erstes eine ul für die Tabulatoren. Die li Elemente bekommen Links auf Anker. Diese Anker verweisen ids in div Elementen, die der Reihe nach aufgeführt werden und den eigentlichen Inhalt enthalten.
Das Element wird auf die natürliche Größe des Inhalts gesetzt mit folgender Eigenschaft.
$( "#tabs" ).tabs({collapsible: true});
Eine sehr einfache und schöne Bildergalerie. Binden Sie die js und css Dateien ein. Laden Sie auch die beiden png Bilder hoch. Darin sind die Icons enthalten.
Im Download ist eine Standarddatei enthalten. Unter Customize finden Sie alle Einstellmöglichkeiten.
Es folgen einige Beispiel mit verschiedenen Opitonen
small Version | fullWindow | passend | fotorama4
Mit dem Smoove Plugin weist man Scrolleffekte zu. Das heißt, wenn ein Element ins Bild scrollt, erscheint es mit einem Effekt. Es wird eingeblendet und bewegt sich, dreht sich etc. Das funktioniert nicht mit dem ersten Element, der Seite, weil dieses ja bereits sichtbar ist.
Man weist die Effekte folgendermaßen per Script zu.
$('.foo').smoove(options);
Die Options werden in einem key: value Paar in geschweiften Klammern eingefügt.
$(".b1, .b2, .b3").smoove({
offset : '15%',
moveX : '100px',
moveY : '100px',
});
In HTML weist man einigen Div Elementen die Klassennamen b1, b2 und b3 zu. Nun hat man die Möglichkeit dass ein Element im HTML div Tag per Attribut andere Werte bekommt. Im Beispiel unten bekommt das div Element einen anderen moveY Wert. Der im Script definierte Wert von 100px wird durch das HTML Attribut überschrieben. Achten Sie auf die Schreibweise. die CamelCase Schreibweise wird durch Bindestriche ersetzt. Alle weiteren Optionen finden Sie auf der Original Smoove Site.
<div class="b3" data-move-y="-200px" >
Die beiden Werte perspective und transformOrigin machen nur im Zusammenhang mit 3D Transformationen Sinn. perspective erwartet einen integer. Hier wird die perspektivische Verzerrung eingestellt.
perspective : 300
transformOrigin bekommt 2 Werte für den perspektivischen Fluchtpunk.
Entweder in Prozent oder man benutzt die Schlüsselworte:
left, right, bottom, top
Die beiden Wert werden als String notiert.
transformOrigin: '50% 100%'
In diesem Beispiel macht der erste Wert für left oder right keinen Sinn, da nur um die x-Achse rotiert wird. rotateX: '90deg'
Ein toller Effekt mit einem tollen ausführlichen Tutorial