Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Optionsschaltergruppe“ aus.
Zuletzt aktualisiert am
1. Mai 2021
Hinweis:
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
Widget „Überprüfung - Optionsschaltergruppe“
Das Widget Überprüfung - Optionsschaltergruppe ist eine Gruppe von Optionsschaltflächen mit Überprüfungsunterstützung bei der Auswahl. Das Widget erzwingt die Auswahl eines der Optionsschalter der Gruppe.
Im folgenden Beispiel ist ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ mit verschiedenen Zustandswerten dargestellt.
A. Fehlermeldungen des Widgets „Überprüfung - Optionsschaltergruppe“ B. Widgetgruppe „Überprüfung - Optionsschaltergruppe“
Das Widget „Überprüfung - Optionsschaltergruppe“ hat neben dem Anfangszustand drei weitere mögliche Zustände: „Gültig“, „Ungültig“ und „Erforderlich“. Sie können die Eigenschaften für diese Zustandswerte ändern, indem Sie je nach gewünschtem Überprüfungsergebnis die entsprechende CSS-Datei („SpryValidationRadio.css“) bearbeiten. Mit einem Widget vom Typ „Überprüfung - Optionsschaltergruppe“ können Eingabedaten zu unterschiedlichen Zeitpunkten überprüft werden, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, eine Auswahl vornimmt oder das Formular sendet.
Anfangszustand
Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Zustand „Gültig“
Der Benutzer trifft eine Auswahl. Das Formular kann danach gesendet werden.
Erforderlich-Zustand
Der Benutzer hat eine erforderliche Option nicht aktiviert.
Zustand „Ungültig“
Der Benutzer hat eine Optionsschaltfläche ausgewählt, deren Wert nicht zulässig ist.
Wenn ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ durch eine Benutzeraktion in einen dieser Zustände wechselt, wendet die Programmlogik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular sendet, jedoch keine Optionen aktiviert hat, wendet Spry eine Klasse auf das Widget an, durch die die Fehlermeldung „Nehmen Sie eine Auswahl vor“ angezeigt wird. Die Regeln für Stil und Anzeigezustände von Fehlermeldungen sind in der Datei „SpryValidationRadio.css“ abgelegt, die dem Widget zugeordnet ist.
Der HTML-Standardcode für das normalerweise in einem Formular verwendete Widget „Überprüfung - Optionsschaltergruppe“ besteht aus einem span-Container-Tag, das das input type="radio"-Tag der Optionsschaltergruppe umgibt. Der HTML-Code für das Widget „Überprüfung - Optionsschaltergruppe“ enthält außerdem script-Tags im Kopf des Dokuments und nach dem HTML-Code des Widgets.
Eine ausführlichere Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ (einschließlich der vollständigen Code-Struktur) finden Sie unter www.adobe.com/go/learn_dw_spryradio_de.
Widget „Überprüfung - Optionsschaltergruppe“ einfügen und bearbeiten
Widget „Überprüfung - Optionsschaltergruppe“ einfügen
-
-
Geben Sie im Feld „Spry-Optionsschaltergruppe“ einen Namen für die Optionsschaltergruppe ein.
-
Fügen Sie der Gruppe Optionsschaltflächen hinzu oder entfernen Sie Optionsschaltflächen, indem Sie auf die Schaltfläche „+“ oder „-“ klicken.
-
Klicken Sie in der Spalte „Beschriftung“ auf den Namen jeder Optionsschaltfläche, um den jeweiligen Namen bearbeiten zu können, und weisen Sie jeder Optionsschaltfläche einen eindeutigen Namen zu.
-
Klicken Sie in der Spalte „Wert“ auf den jeweiligen Wert, um diesen bearbeiten zu können, und weisen Sie jeder Optionsschaltfläche einen eindeutigen Wert zu.
-
(Optional) Klicken Sie auf eine Optionsschaltfläche oder den entsprechenden Wert, um eine bestimmte Zeile auszuwählen, und dann auf den Pfeil nach oben oder unten, um die Optionsschaltfläche jeweils eine Zeile nach oben bzw. nach unten zu verschieben.
-
Wählen Sie einen Layouttyp für die Optionsschaltergruppe aus.
Zeilenumbrüche
Platziert jede Optionsschaltfläche mithilfe von Zeilenumbrüchen (br-Tags) auf einer separaten Zeile.
Tabelle
Platziert jede Optionsschaltfläche mithilfe von Tabellenzeilen (tr-Tags) auf einer separaten Zeile.
-
Klicken Sie auf „OK“.
Hinweis:
Sie können Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, eine Auswahl vornimmt oder das Formular sendet.
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur
Überprüfung erfolgt, wenn der Benutzer außerhalb der Optionsschaltergruppe klickt.
Ändern
Überprüfung erfolgt bei der Benutzerauswahl.
OnSubmit
Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist standardmäßig ausgewählt und kann nicht deaktiviert werden.
Widgetstatus in der Entwurfsansicht anzeigen
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü „Zustandsvorschau“ anzeigen möchten. Wählen Sie beispielsweise „Anfänglich“, um das Widget in seinem Ursprungszustand anzuzeigen.
Zustand „Erforderlich“ von Optionsschaltflächen ändern
Bei Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ muss der Benutzer standardmäßig eine Auswahl treffen, bevor das Formular gesendet werden kann. Sie können die Auswahl jedoch auch als optional konfigurieren.
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) das Kontrollkästchen „Erforderlich“.
Leeren oder ungültigen Wert festlegen
Sie können einen Wert angeben, der als leer oder ungültig erkannt wird, wenn der Benutzer eine mit diesem Wert verknüpfte Optionsschaltfläche auswählt. Wenn der Benutzer eine Optionsschaltfläche mit einem leeren Wert auswählt, gibt der Browser die Fehlermeldung „Nehmen Sie eine Auswahl vor“ aus. Wenn der Benutzer eine Optionsschaltfläche mit einem ungültigen Wert auswählt, gibt der Browser folgende Fehlermeldung aus: „Wählen Sie einen gültigen Wert aus“.
-
Wählen Sie im Widget „Überprüfung - Optionsschaltergruppe“ die Optionsschaltfläche aus, die für leere oder ungültige Werte verwendet werden soll. Wenn Sie für das Widget leere oder ungültige Werte angeben, müssen zugehörige Optionsschaltflächen vorhanden sein, denen diese Werte zugeordnet sind.
-
Weisen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) der Optionsschaltfläche den Status „Aktiviert“ zu. Geben Sie zum Erstellen einer Optionsschaltfläche mit einem leeren Wert im Textfeld „Aktivierter Wert“ die Zeichenfolge Kein ein. Geben Sie zum Erstellen einer Optionsschaltfläche mit einem ungültigen Wert im Textfeld „Aktivierter Wert“ die Zeichenfolge Ungültig ein.
-
Wählen Sie das gesamte Widget „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf die blaue Registerkarte des Widgets klicken.
-
Legen Sie im Eigenschafteninspektor Werte für „Leerer Wert“ und „Ungültiger Wert“ fest. Geben Sie zum Erstellen eines Widgets, das für leere Werte die Fehlermeldung „Nehmen Sie eine Auswahl vor“ anzeigt, im Textfeld „Leerer Wert“ die Zeichenfolge Kein ein. Geben Sie zum Erstellen eines Widgets, das für ungültige Werte die Fehlermeldung „Wählen Sie einen gültigen Wert aus“ anzeigt, im Textfeld „Ungültiger Wert“ die Zeichenfolge Ungültig ein.
Beachten Sie, dass sowohl für die entsprechende Optionsschaltfläche als auch für das Widget „Überprüfung - Optionsschaltergruppe“ die leeren und ungültigen Werte zugewiesen sein müssen, damit die Fehlermeldungen ordnungsgemäß angezeigt werden.
Widget „Überprüfung - Optionsschaltergruppe“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Widget vom Typ „Überprüfung - Optionsschaltergruppe“ vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den CSS-Code für das Widget „Überprüfung - Optionsschaltergruppe“ ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryradio_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationRadio.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ erstellen, speichert Dreamweaver die Datei „SpryValidationRadio.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Hinweis:
Sie können die CSS-Regeln für das Widget „Überprüfung - Optionsschaltergruppe“ entweder schnell und einfach in der zugehörigen CSS-Datei oder im Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Stil für Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ zuweisen (allgemeine Anweisungen)
-
Öffnen Sie die Datei „SpryValidationRadio.css“.
-
Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Optionsschaltergruppe“ ändern möchten, bearbeiten Sie die Regel radioRequiredState in der Datei „SpryValidationRadio.css“.
-
Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei „SpryValidationRadio.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
Textstil von Fehlermeldungen für das Widget „Überprüfung - Optionsschaltergruppe“ zuweisen
Fehlermeldungen für das Widget „Überprüfung - Optionsschaltergruppe“ werden standardmäßig mit einem 1 Pixel breiten roten durchgehenden Rahmen um den Text angezeigt.
-
Um den Textstil für Fehlermeldungen eines Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ zu bearbeiten, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern dann die Standardeigenschaften oder fügen benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu.
Text für Stilerstellung
Relevante CSS-Regel
Relevante zu ändernde Eigenschaften
Text der Fehlermeldung
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
