JQuery Kochbuch (German Edition)

anderem
.ui-state-default
,
.ui-state-hover
und
.ui-state-active
Eine Eck-Klasse (
.ui-corner-all
)
Eine Interaktions-Klasse, um ein Form-Element zu deaktivieren (
.ui-state-disabled
)
    Schritt 2: Framework-Klassen für anklickbare Elemente anwenden
    Lassen Sie uns mit der Verbesserung der Oberfläche für unsere Reise-Buchungs-Anwendung fortfahren.
    Nachdem wir ein in ThemeRoller erstelltes Theme, angepasst durch Override-Regeln, zugewiesen haben, ist die Oberfläche unserer Reise-App fast fertig. Die anklickbaren Elemente in unseren jQuery UI-Widgets besitzen ein konsistentes Erscheinungsbild – standardmäßig sind die Reiter und die Buttons der Datepicker dunkelgrau mit einer glasartigen Textur.
    Aber unser Button zum Starten der Flugsuche passt nicht zu diesem Design und sieht aus wie ein normaler, ungestylter Browser-Button ( Figure 15-17 ). Wir wollen, dass er mehr wie unser aufgehübschtes Theme-Style aussieht.
    Figure 15-17. Unsere Oberfläche ist fast perfekt, nur der Button »Flugsuche« passt nicht dazu
    Damit der Button zur Flugsuche genauso aussieht wie die anderen anklickbaren Elemente in unserer Reise-Anwendung, werden wir die Framework-Klassen für die anklickbaren Styles –
.ui-state-default
,
.ui-state-hover
und
.ui-state-active
– dem Button-Markup hinzufügen und dann ein kurzes jQuery-Skript schreiben, das die Styles entsprechend zuweist, wenn der Anwender mit dem Button interagiert. Wir werden zudem für abgerundete Ecken sorgen, die den gleichen Radius wie die Tabs- und Datepicker-Widgets haben.
    Zuerst weisen wir dem Button die Klasse für den Standard-Status zu, damit er zu den anderen anklickbaren Elementen passt. Dazu schreiben wir einfach
ui-default-state
in das
class
-Attribute (oder kopieren es aus dem Theme-Stylesheet):
Flugsuche
    Andere anklickbare Elemente, wie unsere Registerkarten, haben abgerundete Ecken, daher wollen wir diese auch für alle Seiten des Button nutzen und dem
class
-Attribute den Wert
ui-corner-all
hinzufügen:
Flugsuche
    Mit diesen wenigen Ergänzungen des Markups haben wir dem Such-Button unseren Standard-Themestyle für anklickbare Elemente zugewiesen und ihn damit auch »themeable« gemacht. Entscheiden wir uns später dazu, ein neues Theme für unsere Reise-Anwendung zu erstellen und anzuwenden, wird der Suchbutton die Standard-Styles für anklickbare Elemente und die Definition für abgerundete Ecken automatisch übernehmen.
    Schließlich wollen wir noch die Hover- und aktiven Styles anwenden, um dem Benutzer Rückmeldung über den Status des Buttons zu geben ( Figure 15-18 ).
    Figure 15-18. Drei Framework-Klassen können anklickbaren Elementen zugewiesen werden
    Um das Erscheinungsbild des Buttons beim Hover und beim Mousedown anzupassen, schreiben wir ein kleines jQuery-Skript. Da wir schon die neueste Version der jQuery Core-Bibliothek heruntergeladen und eingebunden und auch die Widget-Plugins im DOM initialisiert haben, fügen wir dem Ready-Block im DOM eine Funktion hinzu, die die Style-Klassen für unseren Such-Button umschaltet. Wie im folgenden Skript-Block zu sehen, gehören zum
hover
-Event zwei Funktionen – die erste entfernt die Standard-Statusklasse und fügt den Hover-Style beim Mouseover hinzu, während die zweite diese Klassenzuweisung beim Mouseout wieder rückgängig macht –, das
mousedown
-Event ersetzt die Standard- und Hover-Klassen durch die aktive Klasse:
$(function(){
// Tabs und Datepicker initialisieren
     $('#travel').tabs();
     $('#departure-date-picker').datepicker({altField: '#departure-date', altFormat:
     'MM d, yy'});
     $('#arrival-date-picker').datepicker({altField: '#arrival-date', altFormat: 'MM
     d, yy'});

// Hover- und aktive Styles für Suchbutton
     $('#search-flights')
     .hover(
     function(){ $(this).removeClass('ui-state-default').addClass('ui-state-
     hover'); },
     function(){ $(this).removeClass('ui-state-hover').addClass('ui-state-
     default'); }
     )
     .mousedown(
     function(){ $(this).removeClass('ui-state-default, ui-state-
     hover').addClass('ui-state-active'); }
     );
});
    ----
    Note
    Warum sollte man ein Skript schreiben, um den Button-Style anzupassen, wenn doch die CSS-Pseudoklassen (
:hover
,
:active
,
:focus
) das Gleiche ermöglichen? Beim Design des jQuery UI CSS haben wir uns darum viele Gedanken gemacht und uns dann gegen Pseudoklassen entschieden.