genauer in Mehrere Themes auf einer einzelnen Seite verwenden behandeln.) ---- Warning jQuery UI CSSwird mit jeder neuen Version von jQuery UI aktualisiert – so enthalten zum Beispiel neue Releases nicht nur angepasste Skripten, sondern eventuell auch Änderungen am CSS-Code selbst. Während dieses Buch entsteht, weist jQuery UI die Version 1.7 auf und die Rezepte und Techniken in diesem Kapitel lassen sich nur auf Theme-Features in dieser Version anwenden. ---- Schritt 4. Dateien in Ihrem Projektverzeichnis zusammenführen Als nächstes werden wir die im vorigen Schritt heruntergeladene ZIP-Datei öffnen und einen Blick auf ihren Inhalt werfen. Die Dateien von jQuery UI sind in folgender Verzeichnisstruktur angeordnet, die Reihenfolge der Ordner und Dateien kann abhängig von Ihrem Betriebssystem anders sein ( Figure 15-9 zeigt den Ordner geöffnet im Mac OS X). Figure 15-9. Ordnerstruktur der heruntergeladenen jQuery-Datei index.html Beispiel-Markupcode für die von Ihnen gewählten UI-Komponenten. ---- Note Haben Sie sich dazu entschieden, keine Komponenten herunterzuladen, dann ist diese Datei im Download nicht enthalten. ---- /css Enthält einen Theme-Ordner (zum Beispiel custom-theme ) mit den folgenden Dateien: Ein Bilder-Verzeichnis mit Framework-Symbolen und Hintergrund-Texturen. Ihr Theme-Stylesheet, zum Beispiel jquery-ui-1.7.1.custom.css , das die von Ihnen gerade bearbeiteten Styles enthält und, falls Sie es mit angegeben haben, auch die Widget-spezifischen Styles für die ausgewählten Widgets. /js Zusammengefasste jQuery UI JavaScript-Dateien. /development-bundle Einzelne Komponenten-Skripten und CSS-Dateien, die genutzt wurden, um die zusammengefassten Dateien aus den Verzeichnissen css und js zu erstellen, der Text zur Open-Source-Lizenz und andere Ressourcen, die für die weitergehende Entwicklung mit jQuery UI benötigt werden. Wenn Sie mit Ihrem eigenen Projekt arbeiten, sollten Sie einen Blick auf den Markup-Code in index.html werfen und diesen zusammen mit den Demos & Dokumentationen unter http://jqueryui.com als Anleitung für die Integration des Komponenten-Markups und der Skripten in Ihrem Projekt nutzen. Bei unserer Reise-Anwendung kopieren wir den Theme-Ordner im css -Verzeichnis in das Style-Verzeichnis unseres Projekts. Um das ganze nicht zu kompliziert zu machen, haben wir den Style-Ordner auch css genannt. ---- Warning Achten Sie darauf, die vorgegebene Verzeichnisstruktur im Theme-Folder beizubehalten, damit die Symbol-Bilder von den Theme-Klassen korrekt angesprochen werden können. Falls Sie diese Struktur ändern, werden Sie diese Änderungen später wiederholen müssen, wenn Sie sich dazu entschließen, auf eine neuere Version der jQuery UI-Skripten und des CSS-Codes umzusteigen. ---- Schritt 5. Auf die Theme-Stylesheets in Ihrem Projekt verweisen Schließlich nehmen wir noch eine Referenz auf das Theme-Stylesheet im
unserer Seite auf. Denken Sie daran, dass die Stylesheet-Referenz immer vor allen anderen Referenzen auf jQuery UI-Skripten vorgenommen werden muss, damit die CSS-Daten zuerst geladen werden. Dies ist notwendig, da es für manche Widgets wichtig ist, dass der CSS-Code schon geladen ist. Wir verweisen auf das Theme-Stylesheet (fettgedruckt) vor allen anderen Skripten in unserer Reise-Anwendung:
Wenn Sie das Markup und die Styles für die jQuery UI-Widgets eingefügt haben, lassen Sie sich Ihre Seite in einem Browser anzeigen, um zu überprüfen, ob die Styles korrekt angewendet werden. Bei unserer Reise-Anwendung sehen Sie, dass das Theme korrekt angewendet wurde. Wie in Figure 15-10 zu sehen, sind unsere Registerkarten normalerweise grau, der Kopfbereich ist weiß und die Text- und Symbol-Farben entsprechen unseren
Kostenlos Online Lesen 
