Arbeiten mit dem Spry-Widget „Überprüfung - Auswahlliste“

Suchen
Adobe Dreamweaver Benutzerhandbuch

Auf dieser Seite

Gilt für: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 - Auswahl“

Ein Widget vom Typ „Überprüfung - Auswahl“ ist ein Dropdown-Menü, mit dem nach einer Benutzeraktion gültige bzw. ungültige Zustände angezeigt werden. So können Sie beispielsweise in ein solches Widget eine Liste von Zuständen einfügen, die in verschiedene Bereiche gruppiert und durch horizontale Linien getrennt sind. Wenn der Benutzer unabsichtlich anstatt eines Zustands eine Trennlinie auswählt, zeigt das Widget eine Meldung über die ungültige Auswahl an.

Das folgende Beispiel zeigt ein erweitertes bzw. reduziertes Widget vom Typ „Überprüfung - Auswahl“ in verschiedenen Zuständen an:

A. Widget „Überprüfung – Auswahl“ B. Auswahlwidget, gültiger Zustand C. Auswahlwidget, erforderlicher Zustand D. Auswahlwidget, ungültiger Zustand 

Das Widget „Überprüfung - Auswahl“ 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 vom Typ „Überprüfung - Auswahl“ können verschiedene Aspekte überprüft werden, z. B. ob der Benutzer 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 „Fokus“

Der Widget-Zustand, in dem der Benutzer das Widget angeklickt hat.

Zustand „Gültig“

Der Widget-Zustand, in dem der Besucher ein gültiges Element ausgewählt hat und das Formular abgeschickt werden kann.

Zustand „Ungültig“

Der Widget-Zustand, in dem der Besucher ein ungültiges Element ausgewählt hat.

Erforderlich-Zustand

Der Widget-Zustand, in dem der Besucher kein gültiges Element ausgewählt hat.

Wenn ein Widget vom Typ „Überprüfung - Anzeige“ 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 kein Element aus dem Menü gewählt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Wählen Sie ein Element aus“ führt. Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier „SpryValidationSelect.css“, enthalten.

Das Standard-HTML für das Widget „Überprüfung - Auswahl“, normalerweise in einem Formular, enthält ein <span>-Container-Tag, das das <select>-Tag des Textbereichs umgibt. Das HTML für das Widget „Überprüfung - Auswahl“ 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 - Auswahl“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_spryselect_de.

Widget „Überprüfung - Auswahl“ einfügen und bearbeiten

Widget „Überprüfung - Auswahl“ einfügen

  1. Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Auswahl“.
  2. Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
  3. Fügen Sie in der Codeansicht Options-Tags mit Menüelementen und -werten hinzu. Dreamweaver führt diese Aktion nicht automatisch durch. Weitere Informationen finden Sie im vorausgegangenen Thema.

Hinweis:

Sie können Widgets vom Typ „Überprüfung - Auswahl“ 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, bei der Texteingabe oder beim Abschicken des Formulars.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ 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 Widgets 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

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü „Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen möchten, wählen Sie die Option „Gültig“.

Leere Werte verbieten oder zulassen

Für alle mit Dreamweaver eingefügten Widgets vom Typ „Überprüfung - Auswahl“ gilt, dass der Benutzer Menüelemente auswählen muss, die bei der Veröffentlichung des Widgets einen zugeordneten Wert aufweisen. Sie können diese Option allerdings auch deaktivieren.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
  2. Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz im Bereich „Nicht zulassen“ die Option „Leerer Wert“.

Ungültigen Wert festlegen

Sie können einen Wert angeben, der als ungültig ausgegeben wird, wenn der Benutzer ein damit verknüpftes Menüelement auswählt. Wenn Sie also beispielsweise -1 als ungültigen Wert definieren und diesen Wert einem Options-Tag zuweisen, dann gibt das Widget eine Fehlermeldung zurück, sobald ein Benutzer dieses Menüelement auswählt.

<option value="-1"> ------------------- </option>
  1. Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
  2. Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Feld „Ungültiger Wert“ einen ungültigen Wert ein.

Widget „Überprüfung - Auswahl“ anpassen

Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationSelect.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Auswahl“ erstellen, speichert Dreamweaver die Datei „SpryValidationSelect.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 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.

Fehlermeldungs-Textstil für das Widget „Überprüfung - Auswahl“

Fehlermeldungen für das Widget „Überprüfung - Auswahl“ werden in Rot mit einem 1 Pixel breiten Rahmen um den Text angezeigt.

  1. Um den Textstil für Fehlermeldungen des Widgets zu ändern, 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

    		.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg

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

Hintergrundfarben des Widgets „Überprüfung - Auswahl“ ändern

  1. Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Auswahl“ zu ändern, suchen Sie in folgender Tabelle die richtige CSS-Datei und ändern Sie die Standardwerte:

    Zu ändernde Hintergrundfarbe

    Relevante CSS-Regel

    Relevante zu ändernde Eigenschaft

    Hintergrundfarbe des Widgets im gültigen Zustand

    		.selectValidState select, select.selectValidState

    background-color: #B8F5B1;

    Hintergrundfarbe des Widgets im ungültigen Zustand

    		select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select

    background-color: #FF9F9F;

    Hintergrundfarbe des Widgets, wenn es den Fokus hat

    		.selectFocusState select, select.selectFocusState

    background-color: #FFFFCC;