Selektoren
Im CSS-Bereich kann über CSS-Selektoren auf Formularelemente zugegriffen werden und ihre Darstellung entsprechend angepasst werden.
Im JavaScript-bereich wird das Framework jQuery verwendet, welches CSS-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann mit JavaScript auf Formularelemente zugegriffen werden. Im CSS-Bereich können diese Selektoren direkt verwendet werden.
Weitere Informationen zu CSS und weiterführende Links sind im Abschnitt zum CSS-Bereich zu finden.
Weitere Informationen zu jQuery und weiterführende Links sind im Abschnitt zum Skriptbereich zu finden.
Im Folgenden wird erklärt, wie Formularelemente mit Selektoren ausgewählt werden können und welche speziellen Selektoren es bei Formularen von Xima® Formcycle gibt.
Eine Liste, wie auf Formularelemente über Selektoren zugegriffen werden kann, findet sich im Abschnitt Selektoren. Im Folgenden eine kurze Einleitung hierzu.
Attributselektoren bei der Formularerstellung
Häufig soll im Xima® Formcycle-Designer auf ein Formularelement mit einem bestimmten Namen zugegriffen werden. Dazu kann folgender Selektor verwendet werden.
color: #DDD;
}
name
Beziehe alle Elemente ein, die ein HTML-Attribut name haben.element
Wert, den das Attribut name haben soll.
Der Wert des Attributs name entspricht hierbei dem Namen des Formularelements, welches im Designer unter Grundeigenschaften vergeben wird.
Einige Formularelemente – wie z.B. Eingabefeld, Upload, Textarea – bestehen aus zwei HTML-Elementen. Neben dem eigentlichen Element wird noch ein HTML-Element für das Label erzeugt. Um beide HTML-Elemente gemeinsam zu selektieren, wird statt name das Attribut xn verwendet.
font-weight: 600;
}
xn
Beziehe alle Elemente ein, die das HTML-Attribut xn haben.element
Wert, den das Attribut xn haben soll.
Weitere Attributselektoren
$('input[type=text]')
// Alle Links, die im Attribute "href" einen Wert haben, der mit ".pdf" endet.
$('a[href$=".pdf"]')
// Alle Bilder mit einem "alt" Attribut
$('img[alt]')
Wenn Sie z.B. im Designer unter Eigenschaften einem Formularelement eigene Attribute für ein Element vergeben werden (z.B. meinAttribut mit dem Wert meinWert), können Sie mit $('[meinAttribut="meinWert"]') darauf zugreifen.
Arbeiten mit selektierten Elementen
Nachdem Elemente selektiert wurden, können diese mittels Funktionen von jQuery oder über weitere von Xima® Formcycle bereitgestellte Funktionen verändert werden.
$('input[type=text]').visible(false)
// Element mit Namen Postleitzahl als Mussfeld schalten
$('[name=Postleitzahl').setRequired(true)
Selektoren für Formularlemente
| Selektor | Bemerkung | Beispiel (jQuery / CSS) |
|---|---|---|
| FORM.xm-form | Selektiert das gesamte Formular. | $('FORM.xm-form') FORM.xm-form { font-family: Arial; } |
| .class | Selektiert alle Elemente mit der entsprechenden Klasse. Eine Auflistung aller Klassennamen der Formularelemente findet sich unten. Zusätzlich gibt es noch die folgende Klassen. | $('.XPage') .XPage { background-color: #EEE; } |
| .required-star | Selektiert alle Elemente, die den Stern darstellen, der an einem Mussfeld angezeigt wird. | $('.required-star') .required-star { color: red; } |
| .xm-item-div | Jedes Formularelement befindet sich in einem DIV-Element mit der Klasse xm-item-div. Dieses DIV-Element enthält die entsprechenden Elemente wie INPUT, SELECT, oder LABEL. Beispielsweise besteht ein Eingabefeld aus einem LABEL-Element und einen INPUT-Element, welche beide zusammen in einem DIV mit der Klasse .xm-item-div enthalten sind. | $('[.xm-item-div]') .xm-item-div { font-size: 1.2em; } |
| .C<KLASSE> | Wie oben unter .xm-item-div erläutert, befinden sich alle Formularelemente in einem umschließenden DIV-Element der Klasse .xm-item-div. Wenn das Formularelement z.B. die Klasse XTextField hat, trägt dieses DIV-Element trägt zusätzlich noch die Klasse CXTextField. C steht hierbei für Container. Hiermit können alle Container einer bestimmten Art von Formularelement selektiert werden. Eine Auflistung der Klassen findet sich unten. | $('[.CXTextField]') $('[.CXCheckbox]') $('[.CXImage]') .CXCheckbox label { color: #aaa; } |
| .xm-form-row | Werden mehrere Formularelemente in einer Reihe nebeneinander platziert, so wird ein DIV-Element mit der Klasse xm-form-row erzeugt, welches diese Elemente enthält. | $('[.xm-form-row]') .xm-form-row { border-style: solid; } |
| name | Auflösen des Elements über den Namen. Dieser Selektor funktioniert bei jedem Element. Bei Elementen, die dynamisch geschaltet wurden, sollte dieser Selektor jedoch nicht verwendet werden, da das Attribut name um einen Index erweitert wird. Stattdessen kann org_name verwendet werden, siehe unten. | $('[name=element]') [name=element]{ font-weight: 700; } |
| org_name | Wird ein Formularelement dynamisch geschaltet, erhält jedes Element zusätzlich das Attribut org_name. Das Attribut name wird um einen Laufindex erweitert. Im Beispiels rechts werden alle dynamisch erzeugten Eingabefelder selektiert, die dynamisch von dem ursprünglichen Eingabefeld mit dem Name tf1 erzeugt wurden. | $('[org_name=tf1]') [org_name=tf1] { margin: 2px; } |
| xn | Selektiert ein Formularelement. Einige Elemente, wie z.B. Eingabefeld, Upload, Textarea etc. bestehen aus zwei Elementen. Dem eigentlichen Element und dem beschreibenden Label. Um beide Elemente gemeinsam zu selektieren, wird statt name das Attribut xn verwendet.
| $('[xn=element]') [xn=XTextArea] { font-family: sans-serif; } |
| cn | Selektiert alle Formularelemente einer Klasse. Eine Liste der Klassen befindet sich unten. Einige Elemente, wie z.B. Eingabefeld, Upload, Textarea etc. bestehen aus zwei Elementen. Dem eigentlichen Element und dem beschreibenden Label. Um beide Elemente gemeinsam zu selektieren, wird statt class das Attribut cn verwendet. | $('[cn=XPage]') [cn=XTextField]{ font-family: serif; } |
Liste der Klassen
| Selektor | Bemerkung | Beispiel |
|---|---|---|
| XPage | Selektiert alle Seiten. | $('[.XPage]') $('[cn=XPage]') |
| XContainer | Selektiert alle Container. | $('[.XContainer]') $('[cn=XContainer]') |
| XFieldSet | Selektiert alle Fieldsets. | $('.XFieldSet') $('[cn=XFieldSet]') |
| XSpan | Selektiert alle Texte. | $('.XSpan') $('[cn=XSpan]') |
| XTextArea | Selektiert alle Editoren. | $('.XTextArea') $('[cn=XTextArea]') |
| XTextField | Selektiert alle Eingabefelder. | $('.XTextField') $('[cn=XTextField]') |
| XCheckbox | Selektiert alle Checkboxen. | $('.XCheckbox') $('[cn=XCheckbox]') |
| XSelect | Selektiert alle Auswahlelemente. | $('.XSelect') $('[cn=XSelect]') |
| XLine | Selektiert alle Trennlinien. | $('.XLine') $('[cn=XLine]') |
| XImage | Selektiert alle Bilder. | $('.XImage') $('[cn=XImage]') |
| XSpacer | Selektiert alle Abstandsblöcke. | $('.XSpacer') $('[cn=XSpacer]') |
| XUpload | Selektiert alle Upload-Elemente. | $('.XUpload') $('[cn=XUpload]') |
| XButtonList | Selektiert alle Schaltflächen-Leisten. | $('.XButtonList') $('[cn=XButtonList]') |