Wiki-Quellcode von Der Selektor
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{content/}} | ||
| 2 | |||
| 3 | Im [[CSS-Bereich>>doc:Main.CSS-Bereich]] kann über CSS-Selektoren auf [[Formularelemente>>doc:Main.FormDesigner.FormElements.WebHome]] zugegriffen werden und ihre Darstellung entsprechend angepasst werden. | ||
| 4 | |||
| 5 | Im Skriptbereich wird das Framework //jQuery //verwendet, welches CSS-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann mit //Javascript //auf Formularelemente zugegriffen werden. | ||
| 6 | |||
| 7 | Weitere Informationen zu //CSS //und weiterführende Links sind im [[Abschnitt zum CSS-Bereich>>doc:Main.CSS-Bereich]] zu finden. | ||
| 8 | |||
| 9 | Weitere Informationen zu //jQuery// und weiterführende Links sind im [[Abschnitt zum Skriptbereich>>doc:Main.Script-META-und-CSS-Bereich]] zu finden. | ||
| 10 | |||
| 11 | Eine Liste, wie auf Formularelemente über Selektoren zugegriffen werden kann, findet sich im Abschnitt [[Selektoren>>doc:ElementSelectors||style="line-height: 1.4em; background-color: rgb(255, 255, 255);"]]. Im Folgenden eine kurze Einleitung hierzu. | ||
| 12 | |||
| 13 | == Attributselektoren bei der Formularerstellung == | ||
| 14 | |||
| 15 | Häufig soll im {{designer case="dat"/}} auf ein Formularelement mit einem bestimmten Namen zugegriffen werden. Dazu kann folgender Selektor verwendet werden. | ||
| 16 | |||
| 17 | {{code language="Javascript"}} | ||
| 18 | $('[name=element]') // mittels jQuery im Skriptbereich | ||
| 19 | {{/code}} | ||
| 20 | |||
| 21 | {{code language="CSS"}} | ||
| 22 | [name=element] { /* mittels CSS im CSS-Bereich */ | ||
| 23 | color: #DDD; | ||
| 24 | } | ||
| 25 | {{/code}} | ||
| 26 | |||
| 27 | * {{litem title="name"}}Beziehe alle Elemente ein, die ein HTML-Attribut //name// haben.{{/litem}} | ||
| 28 | * {{litem title="element"}}Wert, den das Attribut //name// haben soll.{{/litem}} | ||
| 29 | |||
| 30 | Der Wert des Attributs //name// entspricht hierbei dem Namen des Formularelements, welches im Designer unter [[Grundeigenschaften>>doc:Main.Grundeigenschaften]] vergeben wird. | ||
| 31 | |||
| 32 | Einige Formularelemente – wie z.B. [[Eingabefeld>>doc:Main.FormDesigner.FormElements.InputField.WebHome]], [[Upload>>doc:Main.Upload]], [[Textarea>>doc:Main.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. | ||
| 33 | |||
| 34 | {{code language="Javascript"}} | ||
| 35 | $('[xn=element]') // mittels jQuery im Skriptbereich | ||
| 36 | {{/code}} | ||
| 37 | |||
| 38 | {{code language="CSS"}} | ||
| 39 | [xn=element] { /* mittels CSS im CSS-Bereich */ | ||
| 40 | font-weight: 600; | ||
| 41 | } | ||
| 42 | {{/code}} | ||
| 43 | |||
| 44 | * {{litem title="xn"}}Beziehe alle Elemente ein, die das HTML-Attribut //xn// haben.{{/litem}} | ||
| 45 | * {{litem title="element"}}Wert, den das Attribut //xn// haben soll.{{/litem}} | ||
| 46 | |||
| 47 | == Weitere Attributselektoren == | ||
| 48 | |||
| 49 | {{code language="Javascript"}} | ||
| 50 | // Alle Eingabefelder vom Typ "text" | ||
| 51 | $('input[type=text]') | ||
| 52 | |||
| 53 | // Alle Links, die im Attribute "href" einen Wert haben, der mit ".pdf" endet. | ||
| 54 | $('a[href$=".pdf"]') | ||
| 55 | |||
| 56 | // Alle Bilder mit einem "alt" Attribut | ||
| 57 | $('img[alt]') | ||
| 58 | {{/code}} | ||
| 59 | |||
| 60 | Wenn Sie z.B. im Designer unter Eigenschaften einem Formularelement [[eigene Attribute>>doc:Main.Attribute]] für ein Element vergeben werden (z.B. //meinAttribut// mit dem Wert //meinWert//), können Sie mit {{code language="Javascript"}}$('[meinAttribut="meinWert"]'){{/code}} darauf zugreifen. | ||
| 61 | |||
| 62 | == Arbeiten mit selektierten Elementen == | ||
| 63 | |||
| 64 | Nachdem Elemente selektiert wurden, können diese mittels Funktionen von //jQuery// oder über weitere von {{formcycle/}} [[bereitgestellte Funktionen>>doc:Main.Zusaetzliche_Script-Funktionen]] verändert werden. | ||
| 65 | |||
| 66 | {{code language="Javascript"}} | ||
| 67 | // Alle Eingabefelder verstecken | ||
| 68 | $('input[type=text]').visible(false) | ||
| 69 | |||
| 70 | // Element mit Namen Postleitzahl als Mussfeld schalten | ||
| 71 | $('[name=Postleitzahl').setRequired(true) | ||
| 72 | {{/code}} |