Dafür gibt es ein paar wichtige Gründe: Die Stylesheets werden dadurch so komplex, dass man keine Chance mehr hat, sie irgendwie schlank zu halten. Zudem müsste man dann alle möglichen Szenarien durchdenken, in denen diese Styles in Konflikt miteinander geraten könnten. Der CSS-Code bläht sich dadurch auf, was das Stylesheet deutlich vergrößern würde. Manche Browser, zum Beispiel ältere, aber immer noch sehr verbreitete Versionen des Internet Explorers, unterstützen Pseudoklassen nur für Link-Elemente (Anker-Tags), daher hätten wir für alle anderen anklickbaren Elemente trotzdem Klassen erstellen müssen. ---- Schließlich sieht unser Button jetzt wie in Figure 15-19 aus. Figure 15-19. Unser abschließendes Design mit einer Anwendung der Theme-Klassen auch für den Such-Button Nachdem der Button nun so eingerichtet ist, dass sein Style dem Rest der Anwendung entspricht, können wir noch bei Bedarf die Klasse ui-state-disabled anwenden, um dem Benutzer zu zeigen, dass der Button deaktiviert ist (siehe Figure 15-20 ). Stellen Sie sich zum Beispiel vor, alle Felder in unserer Form zur Flug-Buchung seien Pflichtfelder. Dann sollte der Such-Button solange deaktiviert bleiben, bis der Anwender für jedes Feld einen gültigen Wert eingegeben hat. Ist die Form vollständig ausgefüllt, aktivieren wir auch wieder den Button zum Abschicken. Figure 15-20. Durch Hinzufügen der Klasse ui-state-disabled erscheint ein Form-Element deaktiviert Um unserem Such-Button den Deaktivierungs-Status zu verpassen, fügen wir die Framework-Klasse ui-state-disabled hinzu. (Wir brauchen beide Klassen für das korrekte Erscheinungsbild, da der Style für den deaktivierten Status nur die Opazität des Buttons reduziert.)
Durch das Hinzufügen der Deaktivierungs-Klasse wird nur das Aussehen des Button geändert, nicht aber die Funktionalität. Er kann immer noch zum Abschicken der Form genutzt werden. Um sicherzustellen, dass der Button tatsächlich deaktiviert ist, müssen Sie ihm auch noch das Attribut disabled mit dem entsprechenden Wert zuweisen: disabled="disabled">Flugsuche Diskussion Framework-Klassen sind so entworfen, dass sie sich in einer Anwendung wiederverwenden lassen. Damit wird dem Entwickler eine ganze Sammlung von Klassen angeboten, mit denen er auch seine eigenen Elemente in einer Applikation beeinflussen kann – so wie der Such-Button in unserer Reise-Anwendung, aber auch Ihre eigenen Widgets. Da Framework-Klassen nach ihrem Zweck benannt sind, geschieht das Zuweisen zu eigenen Komponenten ziemlich intuitiv: Klassen für anklickbare Elemente lassen sich Buttons, Links oder anderen Elementen zuweisen, die einen Hover- oder aktiven Style benötigen. Klassen für die Eck-Definition lassen sich allen Elementen mit Block-Eigenschaften zuweisen. Layout-Hilfsklassen können in der gesamten Layout-Struktur verwendet werden, um gleitende Container zu bearbeiten oder um die Sichtbarkeit von Inhalten zu beeinflussen. Hinweis-Klassen können Elementen zugewiesen werden, die besonders hervorzuheben sind oder Fehlermeldungen enthalten. Fügen Sie Framework-Klassen Elementen hinzu, die nicht zum jQuery UI gehören, dann werden diese dadurch auch »themable«. Wenn Sie sich dazu entschließen, ein Theme mit ThemeRoller zu bearbeiten und neu herunterzuladen, werden die Styles des neuen Themes auch automatisch auf Ihre Elemente angewendet.
Mehrere Themes auf einer einzelnen Seite verwenden Problem Sie müssen mehr als ein Theme für Ihre Anwendung auf einer einzelnen Seite nutzen. So müssen zum Beispiel Ihre Registerkarten aus jQuery UI den Style eines Haupt-Themes übernehmen, während die Widgets im Inhaltsbereich der Registerkarte einem anderen Theme folgen sollten. Lösung Erstellen Sie ein zweites Theme mit ThemeRollerund wenden Sie es auf ausgewählte Widgets oder Komponenten in Ihrer Anwendung an, indem Sie das neue Theme beim Herunterladen mit einer Klasse, einer ID oder einem anderen einschränkenden Selektor verbinden. ---- Note Dieses Rezept geht von folgenden Annahmen aus: Sie haben Grundlagenwissen über die Funktionsweise von CSS und insbesondere das Kaskadieren von Styles, die Vorrangeinstellungen und das Einschränken von Selektionen mit Klassen, IDs oder Elementen. (Lesevorschläge finden
Kostenlos Online Lesen 
