jQuery für Webdesigner

Dynamische CSS und Auslagerung des Skriptes

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine der Hauptaufgaben der Skriptsprache ist es, mit jQuery erzeugte CSS-Anweisungen dynamisch den Objekten einer HTML-Seite zuzuweisen. Lagern Sie größere Skripten dabei in externe Dateien aus, verbessert das die Übersicht.

Transkript

Eine Klasse in jQuery kann erst zugewiesen werden, wenn sie existiert. Ich möchte Ihnen in diesem Video zeigen, wie Sie HTML-Objekten Aussehen, also CSS-Anweisungen mittels jQuery direkt zuweisen können. Abschließend werden wir das Skript in ein externes Bibliotheks-File transferieren und abspeichern, weil das macht durchaus Sinn bei größeren Skripten, die auch das ganze HTML-Dokument viel unübersichtlicher machen, diese auszulagern. Und damit schließt dieses Video ab. Gut, fangen wir an mit der Zuweisung von entsprechenden Stylesheet-Angaben. Ich hab hier ein Dokument bereits vorbereitet. Das ist das Dokument st-006, gerade die Überschrift angepasst, der None-Bereich wie gehabt und im None-Bereich gibt es jetzt verschiedene Abschnitte. Es gibt einmal am Kopf des None eine Grafik, die hat die ID mainheader. Dann gibt es eine Klasse, die hat ein None-Objekt, einen None-Container, der hat die Klasse maintext, und dann gibt es noch ein None mit einer ID footer. Das wäre jetzt zum Beispiel etwas, wenn man ein externes Skript herausgeben würde, was natürlich in irgendeiner Dokumentation drinstehen müsste. Weil hier ist es wichtig, irgendwo in einem Readme-File, dass der HTML-Entwickler, wenn er Ihr Skript einsetzt, wenn er dieses Skript einsetzt, natürlich weiß, wie er wo was formatieren muss und welche Namensbestandteile, also IDs oder Klassennamen, er dort vergeben muss. Vielleicht ist Ihnen das auch schon mal aufgefallen, wenn Sie versucht haben, ein jQuery-Skript einzubinden, was eine Grafikbibliothek oder dergleichen Ihnen anzeigt, dann muss man sowas in der Regel auch zuweisen. Gut, fangen wir an. Und zwar beginnt das damit, dass wir in diesem None-Bereich jetzt zum Beispiel die CSS–Angaben für den mainheader, also für die Grafik, hinterlegen. Und das Prinzip ist auch immer wieder das gleiche, sehr einfach: Ich eröffne den Bereich und spreche quasi jetzt durch die Raute die ID mainheader an. Also das heißt: Das hier, die Raute hier vorne, signalisiert jQuery, dass sich hierbei um eine ID handelt, und das ist jetzt zum Beispiel das direkte Ansprechen dieser ID. Die Zuweisung per CSS, die erfolgt mit einem gleichnamigen Befehl, nämlich .css(). Und Sie sehen, wie das eingegeben werden soll, also da haben wir verschiedene Möglichkeiten mittels der CSS. Relevant ist eigentlich, dass man die Einträge anders wie man es vielleicht gewöhnt ist per CSS, splitten muss. Und das kann man hier oben auch sehr schön alles nachlesen. Also ich trage das mal zu. Und jetzt würde ich quasi die CSS-Eigenschaft padding nehmen und das muss ich jetzt splitten. Ich kann also nicht hier hinschreiben Doppelpunkt, wie man es aus den Cascading Style Sheets gewöhnt ist, sondern ich nehme die Option padding, gefolgt von einem Komma, und sage jetzt, was damit geschehen soll. Also zum Beispiel 20 Pixel. Das speicher ich dann entsprechend auf meinem System ab. Betrachten wir uns das Ergebnis im Browser. Und zwar habe ich hier eine Grafik eingebunden, den besagten Text, den wir auch im Dokument finden, und hier unten Klick auf das Logo. Also da passiert natürlich jetzt noch nichts, wenn ich das tue, aber ich habe ja bereits eine Eigenschaft zugewiesen und zwar habe ich einen Abstand um diese Grafik drumherum gesetzt. So, und das aktualisiere ich jetzt mal und das müssten Sie daran erkennen, dass diese Grafik springt. Und wie Sie sehen, ist das Stylesheet aktiv, es wurde zugewiesen. Gut und so geht das Prinzip im Wesentlichen weiter. Das heißt, wenn ich jetzt zum Beispiel hier unten auf die Klasse maintext zugreifen möchte, dann kann ich hier das gleiche Prinzip anwenden. Und Klassenanweisungen werden mit einem Punkt eingeleitet, also hier in dem Falle dann zum Beispiel .maintext. Auch hier ist es möglich, zu verschachteln, also das heißt, die volle Funktionalität von CSS steht Ihnen auch hier zur Verfügung. Also wenn Sie zum Beispiel nicht alle Klassen .maintext meinen, wo auch immer Sie die anwenden eventuell, sondern nur die, die für Absätze gilt, dann würden Sie das auch genauso schreiben, indem Sie p.maintext zum Beispiel definieren. Der Befehl selbst ist wieder identisch. Weisen wir dem mal eine andere Farbe zu und zwar nehmen wir hier #0769aa, so. Keine Bange, die habe ich nicht alle im Kopf. Das habe ich mir vorher herausgesucht. Das ist das gleiche Blau wie in dem Logo von jQuery. Auch das gucken uns kurz an. Also das heißt, der Text müsste jetzt blau werden, und das tut auch. Hier die gleiche Farbe wie dieses. Okay, nehmen wir noch einen und dann lagern wir aus. Ich hab hier unten noch einen Bereich, ein None mit der ID footer und da drin gibt es ebenfalls ein None. Da möchte ich Ihnen auch nochmal zeigen, dass also die volle Funktionalität auch von CSS 2.0 zum Beispiel hier greift. Ich greife zunächst mal die ID auf, #footer, und jetzt möchte ich, dass alle None in #footer eine Stylesheet-Anweisung zugewiesen bekommen. So, und jetzt muss man überlegen, was man denn erreichen will. Zum Beispiel, wenn ich das so schreibe, gilt das zunächst mal für alle , die sich in #footer befinden. Machen wir das mal gerade. Also ich nehme auch wieder Stylesheet-Angabe. Machen wir diesmal font-weight und das Ganze einfach nur fett. So, und dann gilt das eben entsprechend für das None hier unten und, wie man sieht, wird auch fett dargestellt. Ich möchte Ihnen Folgendes zeigen: Wenn ich also jetzt hier noch einmal einen Layer drin hätte, was auch immer, und in diesem Layer, also zum Beispiel, nehmen wir mal was anderes, nehmen wir mal None, und hier drin würde ich jetzt nochmal ein None schreiben, also einfach mal als Beispiel, speicher ich das ab. Dann habe ich hier genau das Gleiche, also auch dieser Begriff ist fett. Wenn ich das aber vermeiden möchte, möchte ich also nur alle None, die innerhalb von footer sitzen, aber genau hier an dieser Position, das können mehrere sein, aber nicht innerhalb der anderen Angaben, seien das Aufzählungen oder Tabellen oder sonst etwas, dann kann ich das zum Beispiel über CSS 2.0 auch in dieser Form kaskadieren. Das kurz aufgerufen sieht so aus, dass das nicht mehr fett ist und so soll es sein. Also, Sie merken, Sie haben die volle Funktionalität von Stylesheets hier über diese Zuweisungsmöglichkeiten und das ist schon wirklich sehr nett. Lassen Sie uns das Dokument nun auslagern. Dazu erzeuge ich mir gerade ein neues Dokument und lösche alles, was hier drinsteht, so. Speicher das schon mal vorsichtshalber ab und legen wir das hierein und nennen das st-006-script und setzen hier hinten ein .js als Endung. Das ist ganz wichtig, also das muss die Endung .js haben für ein JavaScript. Das speicher ich ab. Also ein leeres Dokument und jetzt greife ich mir quasi das, was ich auslagern will, und dabei ist wichtig: Achten Sie darauf, dass Sie auf die None-Tags verzichten. Die brauchen Sie nicht. Sie brauchen nur die Angaben, die jetzt hier an der Stelle stehen. Kopieren Sie sich die hier in Ihr Dokument. Das Schöne ist auch hier an NetBeans: Wenn ich das jetzt markiere und drücke Shift+Tab, dann geht das Ganze zurück und somit kann ich das auch sehr schön im Nachhinein anpassen. Ich speichere das Dokument und jetzt müssen wir das natürlich nur hier in unserem HTML-Dokument einbinden. Und ich denke, Sie sehen es schon hier oben, wie das funktioniert: Ganz einfach, indem ich nun hier reinschreibe: st-006-script.js. Also genau das, was auch hier steht. Speicher das Dokument und lade jetzt hier das HTML-Dokument nochmal. Wie man sieht, wird es aktualisiert. Alle Angaben sind da und genau das wollten wir erreichen mit der Auslagerung. Und Sie haben gesehen, wie einfach Cascading Style Sheets auch Objekten innerhalb eines HTML-Dokumentes zuzuweisen sind und damit ist das wirklich ein sehr leistungsfähiges Prinzip.

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!