jQuery für Webdesigner

Verwendung vorhandener CSS-Angaben in jQuery

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe der Ereignisbehandlung und einer vorhandenen CSS-Angabe können statische HTML-Objekte wie etwa Tabellen zu dynamischen Objekten umfunktioniert werden.

Transkript

Die Ereignisbehandlung mit jQuery wird erst dann richtig deutlich, wenn man in HTML-Dokumenten in Kombination mit Cascading Style Sheets auch das Aussehen direkt in einer Webseite verändert Das ist genau die Basis für Menüpunkte oder eben für Slide-Effekte et cetera. Und das möchte ich Ihnen in dem folgenden Beispiel einmal demonstrieren. Ich habe hier ein neues Dokument erzeugt und das Dokument hat das übliche Prozedere: Wir haben das Skript und wir haben im None-Bereich jetzt einen None-Container. und dieser None-Container, der besitzt insgesamt vier Zeilen, wovon die erste Zeile ganz normal eine Überschrift ist und dann die folgenden Zeilen jeweils einzelne Datenzeilen darstellen. Schauen wir uns das mal kurz an: Das sieht so aus, also ist nichts Besonderes. Und das möchte ich jetzt ein ganz klein wenig verschönern. Bevor wir dann loslegen mit jQuery, brauchen wir dafür auch schon einmal ein Stylesheet Das füge ich jetzt hier ein. Ich will ja gar nichts großartig Besonderes machen, es geht nur ums Prinzip. Ich mache also jetzt mal eine Kombination von der Tabellenformatierung. Ich möchte einmal, dass der border zusammengeklappt ist, also nicht dieser alte, hässliche doppelte border. Ich schalte ihn überhaupt ein, also mit border: 1px solid black; beispielsweise. So, jetzt habe ich schon mal einen Rahmen um die Tabelle drumherum. Schauen wir es uns kurz an: Ich speichere das Dokument ab und aktualisiere die Seite. So, jetzt sieht das Ganze so aus. Was ich jetzt benötige, ist eine Klasse, um den Hintergrund der Tabelle einzufärben und das mache ich wie folgt: Ich gehe also über die Zeile und nehme eine Klasse für die Zeile und weise das dann der einzelnen Zelle zu. So warum das so ein bisschen aufwändig ist, sehen Sie gleich. So, jetzt sage ich, background soll beispielsweise, nehmen wir mal #fafad2 sein. Das ist so ein, wenn ich mich jetzt nicht irre, so ein gelblicher Wert. Dann weisen wir das mal mittels jQuery zu und dafür gehe ich in diesen unteren None-Bereich. Was jetzt wichtig ist: Ich könnte natürlich selbstverständlich hier in die einzelnen Zeilen jeweils ein colored mit hineinsetzen, also hier class="colored" für den Hintergrund. So, wenn ich das jetzt einmal aufrufe, dann sieht man, fehlt das an der Stelle. Und hier das Ganze in class, wieder mit colored. So, habe ich genau das, was ich jetzt haben will, nämlich genau diese Zeile gelb. Aber das würde bedeuten, dass ich nun in jeder Zeile, in jeder None-Zeile der Tabelle diese Klasse einbinden müsste und das ist erstens sehr mühselig und vor allen Dingen bei Hunderten von Zeilen eigentlich ganz undenkbar. Gut, ich gebe zu, es gibt jetzt auch noch andere Möglichkeiten, aber ich möchte Ihnen zeigen, wie leicht es nun ist, mittels jQuery solch eine Klasse zuzuordnen. Und dafür greife ich mir jetzt einfach wieder mein None und sage: Bitte verbinde das mit dieser Klasse, die ich eben in den Stylesheets bereits programmiert habe. So, und dann kommt hier einfach colored hinein und dann gilt das für jedes None, das sich hier unten befindet. Noch einmal: Wenn ich eine ID oder eine Klasse zuordne, dann kann ich natürlich auch hier Änderungen vornehmen, aber das demonstriert sehr schön gerade bei Tabellen, wie einfach und schnell man auch über jQuery solche Klassen zuordnen kann. Schauen wir uns das an: Zackbumm, ist jede Zeile gelb, ohne dass ich hier direkt die Klasse eingetragen habe. Also was hier passiert, ist: Das Dokument wird vollständig geladen und nachdem das geladen wurde, wird dann jeder None-Zeile die Klasse colored zugewiesen. Als wenn man das quasi per Hand auch eingetragen hat. Jetzt möchte ich die Farbe verändern, wenn ich mit der Maus über eine solche Tabellenzeile fahre. Dafür brauche ich ein weiteres Stylesheet, das richte ich mir kurz ein. Und zwar nenne ich das mal mouseon. Mouseover ist deswegen problematisch, weil es auch eben diese Bezeichnung gibt. So, und dann sag ich wieder: Das bitte für die Tabellenzeile zuordnen und hier ändere ich jetzt den background auf eine andere Farbe, sowas wie #1e90ff, das dürfte so ein Blauton in etwa sein. Das bringt uns wieder in den jQuery-Bereich und hier muss ich jetzt nichts anders machen auch wieder, wie auf die Tabellenzeile zu reagieren und den Event-Listener mouseover() darauf anzuwenden. So, das habe ich jetzt gemacht. Dann kommt die function, runde Klammer auf, geschweifte Klammer auf, und hier mit der Schreibweise $(this) kann ich sehr einfach dann an dieser Position die Klasse mouseon zuweisen. So, das ist jetzt eine etwas besondere Schreibweise, weil ich hab ja quasi hier die None bereits spezifiziert, damit weiß er, um was es geht, und dieses $(this) bezieht sich dann ganz einfach auf dieses Objekt im Vorfeld. Jetzt fehlt mir hier noch das Semikolon. Und damit hab ich einen Event-Listener verbunden mit einer Stylesheet-Klasse. Schon mal im Vorfeld: Solche Stylesheet-Klassen muss ich nicht alle hier oben definieren. Die kann ich sogar mit dem jQuery selber schreiben. Weil das macht ja Sinn, wenn ich ein Objekt konstruiere, was es noch gar nicht gibt, mit jQuery, dann muss ich auch dort Stylesheetangaben zuweisen können, weil das kann ja vielleicht der HTML-Programmierer gar nicht wissen. Und das ist durchaus möglich, aber schauen wir uns mal an, was wir bis jetzt geschafft haben: Ich habe meine Website, ich habe meine Hintergründe und jetzt gehe ich mit der Maus auf die mittlere Zeile und Sie sehen, die wird blau. Obere Zeile, untere Zeile. Also jetzt habe ich meine Website blau oder besser gesagt die Tabelle. Das möchte ich allerdings auch nicht. Jetzt muss ich den ganzen Prozess wieder rückgängig machen und dafür brauche ich einen neuen und letzten Eventhandler. Also fange ich auch wieder an: Ich greife wieder mein None und diesmal möchte ich nicht mouseover(), sondern ein mouseout()-Ereignis abfragen. Dann kommt wieder meine function() und wieder der Zugriff auf das Objekt. Und jetzt möchte ich ja keine neue Klasse zuordnen, sondern ich möchte einfach die Klasse wieder entfernen, die ich vorher zugeordnet habe, und die hatte den Namen mouseon. Also das heißt, Sie sehen, wie leistungsfähig – das ist viel leistungsfähiger wie das normale CSS – und damit, noch ein Semikolon, habe ich genau das geschaffen, was man auch beispielsweise schon von Menüpunkten kennt oder von eben bestimmten Effekten innerhalb von horizontalen Menüs oder von Slide-Menüs et cetera. Gucken wir uns an, was wir damit erreicht haben. Ich lade die Seite neu, ich hab meinen gelben Hintergrund und das ist sehr schön eigentlich zu erkennen jetzt, wie die Stylesheet-Klassen reagieren auf die Eventbehandlung mittels der Cascading Style Sheets. Damit wird auch deutlich, wie zum Beispiel ein dynamisches Menü auf solche Hintergründe reagieren kann. Das beschreibt sehr schön die Leistungsfähigkeit. Und wenn wir uns das einmal kurz hier in der Übersicht anschauen, haben wir ein kleines bisschen Stylesheet-Programmierung und noch viel weniger jQuery-Programmierung. Ich denke, mit ein bisschen Übung wird das sehr schnell klar, welche großartigen Möglichkeiten man mit der Stylesheet-Kombination und Eventbehandlung in Webseiten erhält.

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!