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 - Kontrollkästchen“

Beim Widget vom Typ „Überprüfung - Kontrollkästchen“ handelt es sich um ein einzelnes bzw. eine Gruppe von Kontrollkästchen in einem HTML-Formular, mit dem/denen bei Auswahl/Nichtauswahl eines Kontrollkästchen gültige bzw. ungültige Zustände angezeigt werden. So können Sie beispielsweise ein solches Widget zu einem Formular hinzufügen, in dem der Benutzer drei Optionen auswählen muss. Werden nicht alle Optionen ausgewählt, gibt das Widget eine entsprechende Fehlermeldung zurück.

Das folgende Beispiel zeigt das Widget „Überprüfung - Kontrollkästchen“ in verschiedenen Zuständen:

A. Widgetgruppe „Überprüfung - Kontrollkästchen“, Auswahl min.-Zustand B. Widget „Überprüfung - Kontrollkästchen“, erforderlicher Zustand 

Das Widget „Überprüfung - Kontrollkästchen“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie können die Eigenschaften für diese Zustände, je nach gewünschtem Überprüfungstyp, mit dem Eigenschafteninspektor anpassen. Mit einem Widget Überprüfung - Kontrollkästchen lassen sich unterschiedliche Aspekte überprüfen, z. B. wenn der Besucher auf eine Stelle außerhalb des Widgets klickt, eine Auswahl vornimmt oder das Formular sendet.

Anfangszustand

Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.

Zustand „Gültig“

Der Widget-Zustand, in dem der Besucher eine oder mehrere Optionen korrekt ausgewählt hat und das Formular abgeschickt werden kann.

Erforderlich-Zustand

Der Widget-Zustand, in dem der Besucher keine gültige Option ausgewählt hat.

Auswahl min.-Zustand

Der Widget-Zustand, in dem der Benutzer weniger als die erforderliche Anzahl Kontrollkästchen ausgewählt hat.

Auswahl max.-Zustand

Der Widget-Zustand, in dem der Benutzer mehr als die maximal zulässige Anzahl von Kontrollkästchen ausgewählt hat.

Wenn ein Widget vom Typ „Überprüfung - Kontrollkästchen“ durch eine Benutzeraktion in einen dieser Zustände versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keine Optionen ausgewählt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Nehmen Sie eine Auswahl vor“ führt. Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier „SpryValidationCheckbox.css“, enthalten.

Das Standard-HTML für das Widget „Überprüfung - Kontrollkästchen“, normalerweise in einem Formular, enthält ein <span>-Container-Tag, das das <input type="checkbox">-Tag des Textbereichs umgibt. Das HTML für dieses Widget enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.

Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Kontrollkästchen“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycheckbox_de.

Widget „Überprüfung - Kontrollkästchen“ einfügen und bearbeiten

Widgets vom Typ „Überprüfung - Kontrollkästchen“ einfügen

  1. Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Kontrollkästchen“.
  2. Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.

Hinweis:

Sie können Widgets vom Typ „Überprüfung - Kontrollkästchen“ 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.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
  2. 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 des Kontrollkästchens 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.

Minimalen und maximalen Auswahlbereich festlegen

Widgets vom Typ „Überprüfung - Kontrollkästchen“ sind standardmäßig auf die Option „Erforderlich“ eingestellt. Bei Einfügen von Kontrollkästchen auf Ihrer Seite können Sie allerdings einen minimalen bzw. maximalen Auswahlbereich festlegen. Wenn sich beispielsweise sechs Kontrollkästchen innerhalb des <span>-Tags eines einzelnen Widgets vom Typ „Überprüfung - Kontrollkästchen“ befinden und Sie sicherstellen möchten, dass der Benutzer mindestens drei davon auswählt, können Sie diese Einstellung für das gesamte Widget vornehmen.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Auswahlbereich (mehrere)“ aus.
  3. Geben Sie einen Mindest- bzw. Höchstwert an Kontrollkästchen an, den der Benutzer auswählen muss.

Widgetstatus in der Entwurfsansicht anzeigen

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
  2. 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.

Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ anpassen

Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ werden in Rot mit einem 1 Pixel breiten Rahmen um den Text angezeigt. Sie können die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprycheckbox_custom_de.

  1. Öffnen Sie die Datei „SpryValidationCheckbox.css“.

    Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ erstellen, speichert Dreamweaver die Datei „SpryValidationCheckbox.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.

  2. Suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu:

    Text für Stilerstellung

    Relevante CSS-Regel

    Relevante zu ändernde Eigenschaften

    Text der Fehlermeldung

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

    color: #CC3333; border: 1px solid #CC3333;

    Hinweis:

    Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem 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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie