Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Maus-Event, Rückgabewerte und Anzeige der Menü-Unterpunkte

Testen Sie unsere 2018 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video beschreibt die Implementierung eines Maus-Events auf die Hauptmenüstruktur und die Deaktivierung eines Rückgabewertes durch Mausklick an den Browser. Zusätzlich werden die Menü-Unterpunkte ein- und ausgeblendet.

Transkript

Damit unser Expand-Menü auf die Mausaktionen reagieren kann, benötigen diese Objekte über jQuery noch einen Eventhandler. Und dieser Eventhandler wird drei Aufgaben bekommen, die ich Ihnen nacheinander demonstriere. Zunächst einmal möchte ich Ihnen zeigen, wie man den Eventhandler implementiert und gleichzeitig diese unschöne Funktion loswird, dass, wenn ich die Hauptpunkte anklicke, also zum Beispiel wie Edinburgh, dass er dann an den Kopf des Dokumentes springt. Weil der Grund, der liegt hier begraben, nämlich, noch ein Stück weiter runter, diese Position: Der Grund ist diese Raute und die Raute sorgt einfach dafür, dass halt keine Sprungmarke, wenn man so will, gefunden wird und er sucht im Kopf des Dokumentes, findet dort direkt keine und bleibt stehen und das möchte ich vermeiden. Ja, zunächst einmal müssen wir durch Klick auf die Menüelemente einen Prozess in Gang setzen und wir haben durch diesen DOM-Selektor schon mal die richtigen alleine auch durch die Filter .children() und .append()-Funktion rausgesucht und tatsächlich kann man das in jQuery hervorragend kombinieren, also nicht nur der Befehl, der jetzt hier etwas macht, kann ich nutzen, sondern ich kann das Ganze sogar immer wieder weiter erweitern, denn wir haben hier über den DOM-Selektor schon die richtigen Elemente und ob ich ein .append() dazwischen hab oder nicht, ist dem Eventhandler eigentlich relativ egal. Somit lösche ich das Semikolon hinter dem Befehl und mache mit einem Punkt weiter und der Eventhandler heißt .click() und dieser Eventhandler wird nun ganz normal mit einer Funktion implementiert. So und jetzt haben wir hier diesen ganzen Selektorbereich bereits im Visier und müssen nur noch auf diesen Menüpunkt reagieren mit der Raute und das kann man sehr schön, wenn also ein Rückgabewert geschickt wird, wenn also etwas ausgelöst wird, was diese .click()-Funktion zurückgibt an das HTML-Dokument, dann soll er das schlucken und das ist ganz einfach, indem ich einfach sage: return false; und jetzt gibt es nämlich keinen Rückgabewert, wenn ich genau auf diese Elemente klicke. Und es passt halt deswegen so schön, weil halt nur diese Hauptelemente gemeint sind, nicht die Unterelemente. Das wäre jetzt fatal, weil: dann könnte ich keine Webseiten aufrufen. Und damit bleibt das Ganze auch, natürlich nach einer Aktualisierung der Seite, an den Stellen stehen, wo wir das benötigen und springt nicht immer nach oben, weil das wär nicht toll, wenn wir darauf klicken und dann scrollt er zum Kopf des Dokumentes und wir müssen dann erst wieder runterscrollen, um zu schauen, was wir hier geöffnet haben. Und das ist eben sehr schön mit dem return false; realisierbar, also das heißt: Damit schluck ich den Rückgabewert. Ansonsten habe ich nun an einen kompletten, sehr ausführlich und heruntergebrochenen DOM-Selektor mit einer Methode, die Text an die Objekte anhängt, auch noch einen Eventhandler aufgesetzt und dieser Eventhandler, der reagiert nun in dem Moment, wenn ich auf diese Hauptpunkte klicke, zurzeit noch damit, dass er einfach nur den Rückgabewert schluckt.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!