Wir nutzen hier Opazität und Layering, um aus den jQuery UI-Themes noch ein paar mehr Schattierungen herauszuholen. In Figure 14-6 sehen Sie das fertige Produkt: Figure 14-6. Widget-Hintergrund und Feinarbeiten In Figure 14-7 sind schließlich noch Beispiele für den jQuery UI Musikplayer mit vorgefertigten jQuery UI-Themes zu sehen. Figure 14-7. jQuery UI Musikplayer mit verschiedenen ThemeRoller-Themes
Chapter 15. Themes in jQuery UI Maggie Wachs, Scott Jeh, Todd Parker Patty Toland (Filament Group, Inc.)
Einleitung Einer der Vorteile von jQuery UI besteht in der einfachen Integration in viele verschiedene Arten von Websites und Anwendungen. Dazu gehört vor allem die Möglichkeit, den jQuery UI-Widgets ein »Look and Feel« zu verpassen, das zu dem der gesamten Site oder dem System passt. jQuery UI ist mit Bedacht so entworfen, dass das Erstellen eigener Themes einfach ist. Sie können für Ihre Widgets selbst entworfene Styles erstellen – wozu nicht nur Farben und Texturen, sondern alle möglichen Interaktions-Formen gehören, indem Sie folgende Elemente nutzen: jQuery UI CSS Framework, eine umfassende Sammlung von CSS-Klassen, mit denen konsistent Styles und Verhaltensweise für alle Widgets zugewiesen werden können ThemeRoller, das jQuery UI-Tool zum Erstellen von Themes Zusammen bieten sie die Möglichkeit, das Look and Feel von offiziellen jQuery UI-Widgets und selbst gebauten Komponenten einfach und konsistent zu ändern, so dass sie zu Ihrer Site oder Anwendung passen. Dieses Kapitel konzentriert sich darauf, Ihnen zu zeigen, wie Sie diese Tools sinnvoll nutzen können – egal ob Sie damit ein offizielles jQuery UI-Widget konfigurieren oder Ihre eigenen Entwicklungen beeinflussen wollen. Wir beginnen mit einem Überblick über das jQuery UI CSS und die Arbeit mit ThemeRoller, dann stellen wir vier Rezepte zum Thema Theming vor: Anpassen des Styles von jQuery UI-Widgets mit ThemeRoller Überschreiben des Layouts und der Theme Styles von jQuery UI Anwenden eines ThemeRoller-Themes auf eigene Komponenten Mehrere Themes auf einer Seite verwenden Jedes Rezept beginnt mit einem einfachen Beispiel-Designproblem, auf das nach und nach verschiedene Techniken angewendet werden, um das Theme anzupassen. Aus diesem Grund werden Sie in diesem Kapitel immer wieder Verweise auf andere Rezepte finden. Bevor wir uns mit dem Anpassen der Widget-Styles befassen, ist es wichtig, ein Verständnis dafür zu bekommen, wie die jQuery UI-Klassen strukturiert sind und wie sie mit ThemeRoller zusammenarbeiten. Die Komponenten von jQuery UI CSS verstehen Unser wichtigstes Ziel beim Erstellen des jQuery UI CSS war das Vereinfachen des Setup-Prozesses, so dass Entwickler Widgets schnell und problemlos in ihrem Code veröffentlichen können, ohne sich mit komplexem Markup oder CSS herumschlagen zu müssen. Beim Integrieren von fremden JavaScript-Widgetsin unseren eigenen Projekten erforderte das Anpassen des Erscheinungsbildes der Fremd-Widgets einen größeren Aufwand als das korrekte Aufsetzen des Codes, um alles richtig auszuführen. Anders als die Skripten, die durchaus dazu gedacht waren, angepasst zu werden – Skripten für die Kernbestandteile der Bibliothek und die Widgets kümmern sich im Hintergrund um sehr komplexe Aufgaben und lassen sich oft schnell konfigurierbar gestalten – fanden sich die Styles der Widgets im Allgemeinen in einer einzelnen Klasse oder sie waren gar mit dem Markup verwoben. Wir mussten Klassen im Markup erkennen und deren Style-Regeln »zurückrechnen«, bevor wir sie anpassen konnten. Das kostete oft viele Stunden Suchen im Code und in den CSS-Definitionen mit Hilfe von Firebug, um die genutzten Klassen zu erkennen oder um Inline-Styles zu finden, um Hintergrundbilder herauszusuchen und dann die Style-Regeln zu ersetzen oder die Klassen im Markup so anzupassen, dass sie ungefähr dem Design unseres Projekts entsprachen. (Und das ging überhaupt nur dann, wenn Code und CSS halbwegs organisiert und konsistent waren.) Wir fanden das rückständig. Es wäre doch viel einfacher, einem
Kostenlos Online Lesen 
