JQuery Kochbuch (German Edition)

müssen.
    ThemeRoller ist eine Web-Anwendung mit einer intuitiven und unkomplizierten Oberfläche, um eigene Themes für jQuery UI zu entwerfen und herunterzuladen. Mit ThemeRoller können Sie die folgenden Theme-Styles anpassen:
    Basis-Schriftart für alle Widgets : Die Basis-Schriftart gibt einen Schriftschnitt, eine Größe und einen Style vor (normal oder fett), der in allen Widgets im Theme genutzt wird. Standardmäßig wird die Schriftgröße in »em«-Einheiten angegeben. Wir empfehlen, ems anstatt Pixel zu nutzen, damit der Text zusammen mit den Widget-Containern wachsen kann, wenn der Anwender die Schriftgröße im Browser verändert. Sie können aber auch Pixel nutzen. Wie bei Standard-CSS ist es sinnvoll, mehrere Schriftarten anzugeben, falls Ihre erste Wahl nicht auf dem Rechner eines Anwenders installiert ist. Die letzte Schriftart sollte eine generische sein, wie zum Beispiel »serif« oder »sans-serif«.
Eckradius : Ein Eckradius kann konsistent auf alle Widgets im Theme angewendet werden, um ihnen ein abgerundetes Erscheinungsbild zu verpassen. Jeder Radiuswert muss eine Einheit enthalten: Pixel für einen festen Radius, ems für einen Radius, der auf die Änderung der Textgröße reagieren soll, oder Null für »richtig« eckige Ecken. Kleinere Werte lassen die Ecken eckiger sein, größere Werte sorgen für runde Ecken.
    ----
    Note
    Während dieses Buch entsteht, werden Angaben für Ecken in CSS3, wie wir sie im Framework vornehmen, in einigen aktuellen Browsern nicht unterstützt, unter anderem im Internet Explorer. Im Kasten in Themes für jQuery UI-Widgets mit ThemeRoller erstellen erfahren Sie, wie auch in diesen Browsern abgerundete Ecken genutzt werden können.
    ----
    Header, Toolbars und Content-Bereiche : Jeder dieser drei Bereiche setzt eine Hintergrundfarbe mit einer semitransparenten Textur und Farben für Rahmen, Text und Symbole. So wird zum Beispiel der Header-Style für die Titelzeile eines Dialogs oder eines Datepickers und den selektierten Bereich eines Sliders oder Fortschrittsbalkens genutzt, während der Content-Style für den Content-Bereich eines selektierten Akkordeons oder einer Registerkarte verwendet wird.
Standard-, aktive und Hover-Styles für anklickbare Elemente : Es gibt drei Styles, die die verschiedenen Zustände bei der Benutzer-Interaktion repräsentieren:
default
ist der Standard-Status für anklickbare Elemente,
hover
wird genutzt, um deutlich zu machen, dass der Mauscursor über das Element bewegt wird, und
active
wird verwendet, wenn das Element gerade selektiert ist. Jeder Status eines anklickbaren Elements wird durch eine Hintergrundfarbe mit einer semitransparenten Textur und durch Farben für Rahmen, Text und Symbole definiert. Denken Sie daran, dass sich jeder Status ausreichend von den anderen unterscheiden sollte, um dem Anwender eine deutliche Rückmeldung geben zu können.
Styles zum Hervorheben und für Fehler : Dies sind spezielle Styles für die Kommunikation von Zuständen in einem System. Der Highlight-Style wird für Textmeldungen genutzt, die ein Anwender lesen sollte, und für das aktuelle Datum im Kalender-Widget. Zudem ist es nützlich, damit deutlich zu machen, dass der Bildschirm durch Ajax aktualisiert wurde. Der Fehler-Style kann genutzt werden, um darauf hinzuweisen, dass es ein Problem gibt, auf das der Anwender reagieren sollte – zum Beispiel ein Problem beim Überprüfen einer Form oder bei der Benachrichtigung des Anwenders über einen Systemfehler. Beide Styles definieren eine Hintergrundfarbe mit einer semitransparenten Textur und Farben für Rahmen, Text und Symbole. Diese Styles sollten einen deutlichen Kontrast zum normalen Text und zu den Hintergrundfarben bilden, die Sie in Ihrem Theme nutzen. Zudem sollten sie sich auch voeinander unterscheiden, so dass klar ist, welche nur auf sich aufmerksam machen sollen und welche für Fehler und System-Meldungen stehen.
Modaler Screen für Overlays : Der modale Screen ist ein Layer, der zwischen einem modalen Dialog und dem Seiteninhalt darunter liegt. Er wird normalerweise dafür verwendet, den Seiteninhalt zwischenzeitlich als deaktiviert erscheinen zu lassen, während das modale Fenster angezeigt wird. Dieser Style beeinflusst die normale Hintergrundfarbe und die Opazität. Wenn Sie für ein bestimmtes Widget keinen modalen Overlay haben möchten, können Sie das durch die Option
modal
des Widgets beeinflussen.
Schlagschatten-Styles : Wie bei den Styles zum Hervorheben und für