JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

zurückkehren. In der rechten Spalte unter »Theme« geben wir an, wie dieses neue Theme innerhalb unserer Anwendung eingeschränkt werden soll. Klicken Sie auf »Advanced Theme Settings«, um diesen Bereich auszuklappen. Sie erhalten dann zwei Eingabefelder ( Figure 15-23 ):
    In »CSS Scope« geben Sie den Selektor für den Gültigkeitsbereich an (eine Klasse, ID oder ein HTML-Tag). Wenn das Theme-Stylesheet erstellt wird, setzt der Download Builder vor jede Style-Regel diesen Wert, womit alle Style-Regeln nur auf Elemente innerhalb dieses speziellen Containers angewendet werden.
Für unsere Reise-Anwendung geben wir die Klasse
.ui-tabs-panel
ein, die wir als Selektor ermittelt haben. Achten Sie darauf, den führenden Punkt (
.
) mit anzugeben oder – bei der Angabe einer ID – das Hash-Zeichen (#). Dies ist notwendig, damit das Stylesheet korrekt zusammengestellt werden kann.
    ----
    Note
    Wenn Sie dieses Feld leer lassen, wird das Theme nicht auf einen bestimmten Container, sondern global auf alle Widgets in Ihrer Applikation angewendet.
    ----
    »Theme Folder Name« erwartet einen Ordnernamen für das neue Theme, das sie herunterladen wollen. In diesem Ordner finden sich das Theme-Stylesheet und die Bild-Dateien. Standardmäßig entspricht dieser Wert dem Namen des ausgewählten Themes. Bei einem selbst erstellen Theme ist dies »custom-theme«.
Geben Sie im ersten Feld eine Einschränkung für den CSS-Code an, dann schlägt der Download Builder einen Ordnernamen basierend auf diesem Wert vor. Das soll Ihnen entgegenkommen, aber sie können den Vorschlag auch durch einen für die Verzeichnis-Struktur Ihres Projekts sinnvolleren Begriff ersetzen.
Bei der Reise-Anwendung werden wir unseren eigenen Ordnernamen verwenden. Mit »tab-content-theme« ist der Ordnerinhalt besser beschrieben.
    Figure 15-23. Der aufgeklappte Bereich »Advanced Theme Settings« des jQuery UI Download Builders mit Feldern für den CSS-Gültigkeitsbereich und den Ordnernamen für das Theme
    Nachdem wir die beiden Felder ausgefüllt haben, werden wir alle jQuery UI-Widgets markieren, für die wir das neue, eingeschränkte Theme nutzen wollen ( Figure 15-24 ).
    Figure 15-24. Herunterladen eines eingeschränkten Themes durch Ausfüllen der Felder in den Advanced Theme Settings und Selektieren aller Widgets, die dieses Theme nutzen werden
    ----
    Neue Widgets
    Sie müsse alle Widgets herunterladen, die das eingeschränkte Theme nutzen sollen, damit die entsprechenden Styles im CSS-Code enthalten sind. Der JavaScript-Code für diese Widgets ist beim Herunterladen schon enthalten. Wenn Sie nur das eingeschränkte Theme benötigen, können Sie den JavaScript-Code ignorieren, da es sich sehr wahrscheinlich um ein Duplikat dessen handelt, was Sie schon haben.
    Haben Sie all diese Schritte durchgeführt und erst jetzt fällt Ihnen auf, dass Sie für Ihr Projekt zusätzliche Widgets benötigen, die Sie im ursprünglichen Download nicht mit heruntergeladen hatten (zum Beispiel ein Fortschrittsbalken), dann raten wir dringend, die neuen Widgets nicht zusammen mit einem eingeschränkten Theme herunterzuladen. Das Verschmelzen der JS-Dateien ist einfach zu kompliziert.
    Stattdessen empfehlen wir, den Download-Prozess komplett zu wiederholen: Öffnen Sie das ursprüngliche Theme erneut in ThemeRoller und laden Sie alle jQuery UI-Komponenten herunter, die Sie in Ihrem Projekt verwenden. So können Sie einfach das ursprüngliche Theme-Stylesheet und Ihren jQuery UI-JavaScript-Code mit Dateien überschreiben, die alle Widgets in Ihrer Anwendung enthalten. Dazu öffnen Sie das ursprüngliche Theme-Stylesheet, suchen nach dem Kommentar, der mit »To view and modify this theme, visit http://jqueryui.com/themeroller/…« beginnt, kopieren die URL in einen Browser und öffnen ThemeRoller mit den Einstellungen dieses Themes. Nun klicken Sie auf »Download Theme«, um auch die zusätzlichen Widgets auszuwählen.
    ----
    Wenn Sie sich für die gewünschte Version von jQuery UI (standardmäßig ist die letzte stabile Version markiert) entscheiden, klicken Sie auf Download und speichern Sie die ZIP-Datei lokal ab (die Datei wird einen Namen wie
jquery-ui-1.7.1.custom.zip
besitzen).
    Schritt 3. Vereinigen der Dateien in Ihrem Projektverzeichnis
    Der heruntergeladene Ordner enthält das CSS-Verzeichnis (
css
) mit einem Ordner, der Ihr eingeschränktes Theme, den JavaScript-Code für das Widget (
js
), bei dem es sich um ein Duplikat dessen handeln kann, den Sie schon