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

jQuery für Webdesigner

Entwicklung des eigenen Skriptes "Expand-Menü"

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier geht es um die Planung und Ideenbeschreibung einer eigenen Skriptumsetzung zur Erstellung eines Expand-Menüs mit Hilfe von jQuery-Variablen und Konsolenausgaben.

Transkript

Ich möchte Ihnen in diesem Video zeigen, wie man komplexe HTML-Strukturen und damit auch verbunden komplexe Cascading Style Sheet-Hierarchien leichter mit jQuery bearbeiten kann, indem man Variablen einsetzt und um auch den Überblick einer solchen komplexen Struktur besser zu erhalten, hilft die Konsole. Und auch das zeige ich Ihnen in dem Video. Und zwar geht es darum, dass aus diesem hier links stehenden Menü ein sogenanntes Expand-Menü entstehen soll. Bedeutet also: Wenn ich auf diese Hauptpunkte, wie Edinburgh, wie Schottland, wie Schottische Küche, klicke, dann sollen diese Unterpunkte verschwinden und das auch nicht nur bei einem Klick, sondern für das Gesamtmenü. Und dort muss ich mir nun einen Überblick verschaffen, wie diese Struktur aufgebaut ist. Ich wechsel dazu zurück in NetBeans und befinde mich bereits hier in diesem None mit diesem leftmenue. Das Menü selber hat eine ID mit dem Namen leftmenue, da drunter befindet sich ein Aufzählungspunkt, also hier eine nicht nummerierte Liste und dadrunter mit einem einzigen Aufzählungspunkt – das haben wir dann bis hierhin –, in dem sich dann das gesamte Untermenü befindet. Dieses Konstrukt ist deswegen so gewählt, weil man so verschiedene Rubriken als Menüpunkte zusammensetzen kann. Ich gehe mal hier an diese Position. Das heißt, wir haben jetzt hier Wissenswertes stehen mit allen Unterpunkten. Jetzt könnte man eine zweite Rubrik erzeugen, die jetzt hier unten drunter angeordnet werden würde mit weiteren Menüpunkten und deswegen ist dieser Konstrukt so gewählt. Wir haben also hier einen einzigen Aufzählungspunkt und der hat den Namen categories und dort drunter befinden sich weitere nicht nummerierte Listen jeweils nun mit den einzelnen Listenelementen als Menüpunkte. Genau an dieses Objekt, dort müssen wir mit jQuery heran. Zunächst einmal brauchen wir die Position, um mit jQuery dieses Skript zu erstellen. Und da bietet sich im None-Bereich hier bereits an, das Ganze im $(document).ready()- Bereich anzusiedeln, denn das Menü kann erst dann bearbeitet werden, wenn auch tatsächlich das Dokument geladen ist. Also hier schaffe ich mir schon mal ein ganz klein wenig Platz. Um jetzt genau an diese Position heranzukommen, benötigen wir unser "$", gefolgt von den beiden runden Klammern, und hier hinein schreibe ich jetzt die Kombination der ID plus der einzelnen HTML-Objekte plus der einzelnen Cascading Style Sheet-Klassen. Einsteigen tun wir mit #leftmenue. So, #leftmenue bringt uns an diese Position, das ist das Objekt, also, das heißt, dieser None. Und unterhalb diesen Nones interessiert mich der nächste Punkt, nämlich dieser Aufzählungspunkt. Und den kann ich besonders gut ansprechen über die Klasse categories. Das bedeutet, ich kombiniere das Ganze nun an der Stelle mit dem Aufzählungspunkt und der dazugehörigen Klasse .categories und jetzt befinde ich mich an dieser Position. Für das Menü benötige ich Zugriff auf diese jetzt noch weiter in der Hierarchie verschachtelten Unterpunkte. Und dort würde ich dann einfach mit Leerzeichen auf diese Unterpunkte zugreifen. So und damit wäre jetzt zunächst einmal der Pfad angelegt und bei allen weiteren Skript-Vorgängen, die man jetzt erstellt, müsste man immer wieder diese Kombination schreiben und diese Kombination ja, ist einfach zu lange, und das ist auch noch immer ein kleines Beispiel, sodass sich hier auf jeden Fall eignet, eine Variable zu verwenden. Und Variablen in jQuery werden mit dem Schlüsselwörtchen var eingeleitet und jetzt können Sie Grunde mit einem "$" und dann gefolgt von einem Namen beliebige Variablen erstellen. Also zum Beispiel eine $text-Variable ganz normal in Anführungszeichen: "Das ist ein Text" und diese Variable kann dann überall weiter im Skript verwendet werden. Und natürlich können Sie auch numerische Variablen anlegen, also zum Beispiel $num = 12, würden Sie Fließkommazahlen anlegen, dann var $flt = zum Beispiel 1.3 und so weiter und so fort. Das heißt also: Über diese Variablen können Sie sich tatsächlich viel Arbeit in einem Skript sparen und vor allen Dingen natürlich auch Zwischenergebnisse in solchen Variablen ablegen zur weiteren Verwendung. Ich lösche das Beispiel wieder und kehre zurück zur Dokumentstruktur und diese Dokumentstruktur, die möchte ich nun in einer Variablen speichern. Dafür erzeuge ich also mit dem Schlüsselwörtchen var eine solche Variable, gefolgt von dem "$" und da es sich hier um so eine Art Expand-Menü handeln soll, benenne ich die Variable einfach $expand und dann gefolgt von einem "=". Und das, wo jetzt dieser Konstrukt drauf verweist, das wird in der Variable expand gespeichert. Jetzt ist es vielleicht, gerade wenn man beginnt, mit jQuery in dieser Form zu arbeiten, sehr schwer, sich vorzustellen, was ist das denn jetzt wirklich für ein Objekt, was speichert er denn dort, und da hilft uns wieder die Konsole. Ich gehe eine Zeile tiefer und öffne die Konsole mit console.log( und schreibe nun hier die Variable hinein. Bitte beachten Sie, dass Sie jetzt keine Anführungsstriche setzen, würden Sie hier Anführungsstriche drum setzen, dann würden Sie einfach auf dem Bildschirm diese Zeichenkette "$expand" ausgeben und das wollen wir nicht. Wir wollen den variablen Inhalt sehen und dann das Ganze abschließen mit Semikolon. Damit ist dieses Skript erstmal vorbereitet und wir können uns nun in einem Webbrowser wie dem Firefox, also ein Browser, der eine Konsolenausgabe ermöglicht, uns nun anschauen, wie diese Struktur aufgebaut ist und auf welche HTML-Objekte sich dieser Ausdruck hier bezieht. Ich speichere also das Dokument ab, mit Strg+S, wechsle in den Browser und öffne mir hier rechts über den Menüpunkt über Entwickler-Werkzeuge die Web-Konsole. So, und damit diese Konsolenausgabe stattfindet, muss ich das Dokument neu initialisieren oder neu laden, und das mache ich durch Klick auf dieses Icon. Und da sehen wir, was nun passiert ist: Dieser ganze Ausdruck, der in dieser Variable gespeichert wurde, in der Variable $expand, wird nun im console oder mittels console.log() ausgegeben. Und das ist das Ergebnis. Das Schöne daran ist, dass ich nicht nur sehe, was jetzt hier drin steht, sondern tatsächlich damit interaktiv etwas machen kann. Das fällt besonders auf, wenn wir mit der Maus nun auf diese Elemente gehen. Wir sehen: Jetzt bekomme ich die Information, dass als erstes Objekt oben Bed & Breakfast aktiviert wird. Das entspricht tatsächlich meinem ersten Element hier an der Position, nämlich Bed & Breakfast. Also von der Reihenfolge her über #leftmenue li .categories an das erste Aufzählungselement, und das ist tatsächlich, wie wir hier sehen, Bed & Breakfast. Das zweite Element muss nun Edinburgh sein und auch das ist es, allerdings jetzt im kompletten Block. Das liegt daran, das im zweiten dieses Element aufgegriffen wird und dieses Element besitzt eine weitere komplette nicht nummerierte Liste in der Aufzählung und deswegen ist auch dieser komplette Block mit hier an der Stelle nun aktiviert. Und so geht das Prinzip weiter. Jetzt kommen die ganzen einzelnen Unterpunkte, bis dann wieder Schottland den kompletten Block aufnimmt plus die ganzen Unterpunkte. Und Sie sehen, dass also gerade die Konsole sehr schön ermöglicht, nachzuvollziehen, ob man sich an der richtigen Stelle befindet und ob man hier in einem Skript, an dieser Position, die richtige Struktur gewählt hat, die wir dann eben leicht über die Variable auch hinterher jederzeit wieder aufrufen können.

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!