Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Bootstrap 3 Grundkurs

Dropdown mit jQuery ausbauen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe von jQuery kann der Funktionsumfang von Bootstrap problemlos erweitert werden.
04:22

Transkript

Eine kliene Verbesserungsmöglichkeit gäbe es noch rein theoretisch, nämlich die, dass dieses dropdown Menü ausfährt alleine, wenn ich schon mit der Maus über den Bereich drüberfahr. Das kann Bootstrap von sich aus jetzt noch nicht, aber nachdem Bootstrap ja sehr eng mit jQuery zusammenarbeitet, ist es eigentlich gar nicht so schwer diese Funktionalität nachzurüsten. Und dafür gibt's ein eigenes Event bei jQuery und dieses Event heißt hover. D. h. wenn ich mit meiner Maus diesen dropdown Bereich überfahre, ohne das ich auch klicken muss, sollte das dropdown Menü aufklappen und wenn das alles so funktioniert wie ich mir das vorstelle, sollte es beim Verlassen des Bereichs auch wieder zuklappen. Das ist eben die Aktion und die handelt eben mit einem Eingangseffekt und einem Ausgangseffekt und wir schauen's uns jetzt an, wie sehr sich das oder wie gut sich das im Bootstrap integrieren lässt. Ich kann Ihnen gleich verraten, es lässt sich ganz hervorragend integrieren, weil eben Bootstrap JavaScript und vor allem auch jQuery unterstüzt. Und das einzige was jetzt noch gut wäre ist, dass Sie zusätzlich zu dem JavaScript, was jetzt Bootstrap einfach schon mitbringt, und zusätzlich zu jQuery noch eine eigene kleine Funktion hinzufügen, die genau diese Funktionalität bewerkställigt. Deswegen habe ich jetzt eine zweite JavaScript Datei angelet, nämlich mein JavaScript. Und da drinnen habe ich jetzt schon mal vorbereitet diese Funktion von der ich annehme, dass sie schon gut funktionieren wird. Und zwar schauen wir's uns mal aus der Nähe an. Sie ist ein bisschen spröde gebe ich zu, und ich habe sie schon vorgeschrieben, damit nicht so viel Zeit mit Tippen drauf geht. Was hier passiert ist, hier rufen wir so zu sagen die Funktionen jQuery auf. D. h. wenn ich hier ergänzen wollte, sage ich ruft JQuery auf und desweiteren habe ich jetzt nur einen ganz bestimmten Bereich mit dem ich arbeiten möchte. Oder auf den genau diese Funktionalität zutreffen soll. Und das ist eben klasse bei einer unsortierten Liste und darin nochmal bei einem Listenelement, dass mit einer Klasse dropdown versehen ist. Und genau das haben wir ja in unserer Index-Datei. Wir haben einerseits eine unsortierte Liste, die eben als Klasse ein nav dabei hat und innerhalb dieser Liste haben wir nochmal ein Listenelement, dass als Klasse ein dropdown hat. Und genau auf diesen Bereich möchte ich jetzt eben, dass sie hohe Funktion zugreift und zwar eben mit zweifacher Weise. Es soll auf der einen Seite, wenn ich drüberfahre, ein fade in stattfinden, aber wenn ich das ganze wider verlasse ein fade out. Und ich speichere das hier jetzt und werde noch vielleicht, damit ich das ganze auch ausführen kann, das Script hier bei mir miteinführen. D. h. ich lade mir das Script mit der source aus meinem jQuery Ordner, das ist genau das was ich will und zwar heißt das Script meins. So, das sollte eigentlich soweit genügen. Ich speichere. Rufe meine Index Datei auf und wenn ich jetzt über mein dropdown drüberfahre, dann taucht es einfach auf. Taucht auf und verschwindet wieder, wenn ich den Bereich verlasse. Ich kann trotzdem ganz gemütlich drüberfahren. D. h. es ist eben nicht schwer Funktionalitäten, die es in jQuery sowieso gibt, auch in Bootstrap nachträglich zu implementieren, wenn Sie das für Ihre Zwecke brauchen können. Und wie Sie gesehen haben ist es keine Hexerei, dass ganze dann einzubinden. Sie werden also sehen, dass Sie mit den Möglichkeiten von jQuery, Bootstrap noch sehr erweitern können.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!