Im CSS-Bereich kann über CSS-Selektoren auf Formularelemente zugegriffen werden und ihre Darstellung entsprechend angepasst werden.

Im Skriptbereich wird das Framework jQuery verwendet, welches CSS-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann mit Javascript auf Formularelemente zugegriffen 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.

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.

$('[name=element]') // mittels jQuery im Skriptbereich
[name=element] { /* mittels CSS im CSS-Bereich */
 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.

$('[xn=element]') // mittels jQuery im Skriptbereich
[xn=element] { /* mittels CSS im CSS-Bereich */
 font-weight: 600;
}
  • xn
    Beziehe alle Elemente ein, die das HTML-Attribut xn haben.

  • element
    Wert, den das Attribut xn haben soll.

Weitere Attributselektoren

// Alle Eingabefelder vom Typ "text"
$('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.

// Alle Eingabefelder verstecken
$('input[type=text]').visible(false)

// Element mit Namen Postleitzahl als Mussfeld schalten
$('[name=Postleitzahl').setRequired(true)
Tags:
Erstellt von superadmin am 28.09.2015
  
Copyright 2000-2018