Wiki-Quellcode von Selektoren

Zeige letzte Bearbeiter
1 {{content/}}
2
3 Im [[CSS-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] kann über CSS-Selektoren auf [[Formularelemente>>doc:Formcycle.FormDesigner.FormElements.WebHome]] zugegriffen werden und ihre Darstellung entsprechend angepasst werden. Im [[JavaScript-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] wird das Framework //jQuery //verwendet, welches CSS-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann auch mit //JavaScript //auf Formularelemente zugegriffen werden.
4
5 Weitere Informationen zu //CSS //und weiterführende Links sind im [[Abschnitt zum CSS-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] zu finden.
6
7 Weitere Informationen zu //jQuery// und weiterführende Links sind im [[Abschnitt zum JavaScript-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.WebHome]] zu finden.
8
9 Im Folgenden wird erklärt, wie Formularelemente mit Selektoren ausgewählt werden können und welche speziellen Selektoren es bei Formularen von {{formcycle/}} gibt.
10
11 == Attributselektoren bei der Formularerstellung ==
12
13 === Attributselektor Name ===
14
15 Besonders im JavaScript wird häufig auf ein Formularelement mit einem bestimmten Namen zugegriffen. Dazu kann folgender Selektor verwendet werden.
16
17 {{code language="Javascript"}}
18 $("[name='element']") // mittels jQuery im JavaScript-Bereich
19 {{/code}}
20
21 {{code language="CSS"}}
22 [name="element"] { /* mittels CSS im CSS-Bereich */
23 color: #DDD;
24 }
25 {{/code}}
26
27 Der Wert des Attributs //name// entspricht hierbei dem Namen des Formularelements. Also dem Namen, welcher im {{designer/}} unter [[Grundeigenschaften>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]] vergeben wurde.
28
29 Diesse Selektoren sind spezielle Attributselektoren. Sie können allgemein verwendet werden, um ein Elemente anhand seiner Attribute zu selektieren. In HTML kann jedes Element verschiedene Attribute haben:
30
31 {{code language="html"}}
32 <input id="xi-tf-1" class="XItem XTextField" name="tfMail" value="demo@example.com" data-count="9">
33 {{/code}}
34
35 Elemente können anhand dieser Attribute und ihrer Werte selektiert werden. Ein Attributselektor besteht aus 2 Teilen und hat die immer die Form
36
37 {{code language="css"}}
38 [key="value"]
39 {{/code}}
40
41 ; key
42 : Name des Attributs, nach dem gesucht werden. Nur Elemente, welche dieses Attribut gesetzt haben, werden selektiert.
43 ; value
44 : Wert des Attributs. Nur Elemente, die zusätzlich noch diesen Wert für das Attribut haben, werden selektiert.
45
46 Um also alle Elemente zu selektieren, welche das Attribut //value// gesetzt haben, wird {{code}}[value]{{/code}} verwendet. Um nur die zu selektieren, bei den das Attribut auf einen bestimmten Wert gesetzt ist, wird {{code}}[value="demo"]{{/code}} genutzt.
47
48 === Attributselektor xn ===
49
50 Alle Formularlemente sind in einem Container gekapselt. In diesem Container sind neben dem eigentlichen Formularelement auch noch andere HTML-Elemente wie der Beschriftungstext (Label). Um den Container zu selektieren, wird statt //name// ein Attributselektor auf das Attribut //xn// (steht für xima-name) verwendet.
51
52 {{code language="javascript"}}
53 $("[xn='element']"); // mittels jQuery im JavaScript-Bereich
54 {{/code}}
55
56 {{code language="css"}}
57 [xn=element] { /* mittels CSS im CSS-Bereich */
58 font-weight: 600;
59 }
60 {{/code}}
61
62 === Weitere Attributselektoren ===
63
64 {{code language="javascript"}}
65 // Alle Eingabefelder vom Typ "text" selektieren
66 $("input[type='text']")
67 {{/code}}
68
69 {{code language="javascript"}}
70 // Alle Bilder mit einem "alt" Attribut
71 $('img[alt]')
72 {{/code}}
73
74 Es ist auch möglich, etwa nur Elemente zu selektieren, bei denen der Wert eines Attribut auf etwas bestimmtes endet. Hierzu wird statt einem Gleichheitszeichen {{code}}={{/code}} der Operator {{code}}$={{/code}} eingesetzt:
75
76 {{code language="javascript"}}
77
78 // Alle Links, die im Attribute "href" einen Wert haben, der mit ".pdf" endet.
79 $("a[href$='.pdf']")
80 {{/code}}
81
82 == Klassenselektoren ==
83
84 Im HTML gibt es ein spezielles Attribut: {{code}}class{{/code}}. Dies wird auch oft CSS-Klasse bezeichnet. Hier können mehrere frei vergebbare Klassen gelistet werden, getrennt mit einem Leerzeichen. Im CSS kann das etwa genutzt werden, um allen Elementen mit einer bestimmten Klassen ein spezielles Layout zu geben. Im JavaScript kann allen Elemente mit einer bestimmten zusätzliche Funktionalität verliehen werden. Beispielsweise haben alle Formularelemente in {{formcycle/}} immer die Klasse {{code}}XItem{{/code}} und je nach Art des Formularelements noch ein zusätzliche Klasse, etwa [[XTextField>>doc:Formcycle.FormDesigner.FormElements.Input]] oder [[XUpload>>doc:Formcycle.FormDesigner.FormElements.Upload]].
85
86 Da Klassen so häufig benutzt werden, gibt es hierfür spezielle Selektoren. Alle Elemente einer Klasse können selektiert werden, in dem ein Selektor bestehend aus einem Punkt gefolgt vom Namen der Klasse genutzt wird. Das HTML könnte wie folgt aussehen:
87
88 {{code language="html"}}
89 <input class="XItem XTextField">
90 <select class="XItem XSelect">
91 <option value="">Bitte wählen</option>
92 <option value="1">Option 1</option>
93 <option value="2">Option 2</option>
94 </select>
95 {{/code}}
96
97 Nun können Elemente mit Selektoren ausgewählt werden:
98
99 {{code language="css"}}
100 /* Alle Elemente mit der Klasse XItem */
101 .XItem {
102 font-size: 20px; /* Schriftgröße auf 20 Pixels stellen*/
103 }
104
105 /* Nur Textfelder (Klasse XTextField) */
106 .XTextField {
107 color: blue; /* Schriftfarbe auf blau setzen */
108 }
109 {{/code}}
110
111 == Arbeiten mit selektierten Elementen ==
112
113 {{jsdoc name=""/}}
114
115 Nachdem Elemente selektiert wurden, können diese mittels Funktionen von //jQuery// oder über weitere von {{formcycle/}} [[bereitgestellte Funktionen>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdditionalScriptFunctions.WebHome]] verändert werden.
116
117 {{code language="Javascript"}}
118 // Alle Eingabefelder verstecken
119 $('input[type=text]').visible(false)
120
121 // Element mit Namen Postleitzahl als Mussfeld schalten
122 $("[name='Postleitzahl']").setRequired(true)
123 {{/code}}
124
125 === Generische JavaScript-Funktionalität ===
126
127 {{figure image="designer_selectors_prefill_de.png"}}
128 Formularfelder werden mit den Daten des angemeldeten Nutzer vorbefüllt. Diese werden aus dem Object //XFC_METADATA.currentUser// gelesen. Über das Attribut //data-user// wird gesteuert, mit welcher Eigenschaft das Formularfeld vorbefüllt werden soll.
129 {{/figure}}
130
131 Im {{designer/}} können zudem unter Eigenschaften einem Element [[zusätzliche Klassen>>doc:Formcycle.FormDesigner.ElementProperties.CSSClasses]] und [[eigene Attribute>>doc:Formcycle.FormDesigner.ElementProperties.Attributes]] mitgegeben werden. Diese können dann entsprechend selektiert werden. Damit kann etwa JavaScript-Funktionalität geschrieben werden, die auf alle Elemente mit einem bestimmten Attribut angewendet wird. Im {{designer/}} lässt sich dann festlegen, für welche Elemente diese Funktionalität angewandt werden soll.
132
133 {{code language="javascript"}}
134 $("[data-user]").each((_, element) => {
135 const prop = element.dataset.user;
136 const value = XFC_METADATA.currentUser[prop];
137 if (value && !element.value) {
138 element.value = value;
139 }
140 });
141 {{/code}}
142
143 An einem Element wird das Attribut //data-user// hinterlegt. Hier kann ein Wert wie etwa //email// oder //forename// eingetragen werden. Es wird dann beim Öffnen des Formulars in den Daten des aktuellen Nutzer geschaut, ob er diese Eigenschaft (E-Mail-Adresse, Vorname usw.) hat. Wenn ja, wird das Formularfeld automatisch mit dem Wert vorbefüllt. Vorteil bei dieser Vorgehensweise ist, dass das JavaScript nur einmal geschrieben werden muss und dann in jedem Formular benutzt werden kann (falls es als [[Mandatenressource>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] hochgeladen wird).
144
145 == Selektoren für Formularlemente ==
146
147 Hier findet sich eine Auflistung für häufig verwendete Selektoren in {{formcycle/}}.
148
149 {{table dataTypeAlpha="0"}}
150 |=Selektor|=Bemerkung|=Beispiel (jQuery / CSS)
151 |FORM.xm-form|Selektiert das gesamte Formular.|{{code language="javascript"}}$('FORM.xm-form'){{/code}}
152 \\
153 {{code language="css"}}FORM.xm-form {
154 font-family: Arial;
155 }{{/code}}
156 |.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.|{{code language="javascript"}}$('.XPage'){{/code}}
157 \\
158 {{code language="css"}}.XPage {
159 background-color: #EEE;
160 }{{/code}}
161 |.required-star**|Selektiert alle Elemente, die den Stern darstellen, der an einem Mussfeld angezeigt wird.|{{code language="javascript"}}$('.required-star'){{/code}}
162 \\
163 {{code language="css"}}.required-star {
164 color: red;
165 }{{/code}}
166 |.xm-item-div|Jedes [[Formularelement>>doc:Formcycle.FormDesigner.FormElements.WebHome]] 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//.
167 Beispielsweise besteht ein [[Eingabefeld>>doc:Formcycle.FormDesigner.FormElements.Input]] aus einem LABEL-Element und einen INPUT-Element, welche beide zusammen in einem DIV mit der Klasse .xm-item-div enthalten sind.|{{code language="javascript"}}$('[.xm-item-div]'){{/code}}
168 \\
169 {{code language="css"}}.xm-item-div {
170 font-size: 1.2em;
171 }{{/code}}
172 |.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//.
173 \\Hiermit können alle Container einer bestimmten Art von Formularelement selektiert werden.
174 \\Eine Auflistung der Klassen findet sich unten.|{{code language="javascript"}}$('[.CXTextField]')
175 $('[.CXCheckbox]')
176 $('[.CXImage]'){{/code}}
177 \\
178 {{code language="css"}}.CXCheckbox label {
179 color: #aaa;
180 }{{/code}}
181 |.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.|{{code language="javascript"}}$('[.xm-form-row]'){{/code}}
182 \\
183 {{code language="css"}}.xm-form-row {
184 border-style: solid;
185 }{{/code}}
186 |name|
187 Auflösen des Elements über den Namen. Dieser Selektor funktioniert bei jedem Element. Bei Elementen, die [[wiederholbar>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties||anchor="repeat"]] sind, sollte dieser Selektor jedoch nicht verwendet werden, da das Attribut //name //um einen Index erweitert wird//. //Stattdessen kann// org_name //verwendet werden, siehe unten.|{{code language="javascript"}}$('[name=element]'){{/code}}
188 \\
189 {{code language="css"}}[name=element]{
190 font-weight: 700;
191 }{{/code}}
192 |org_name|Wird ein Formularelement [[wiederholbar>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties||anchor="repeat"]], erhält jedes Element zusätzlich das Attribut //org_name//. Der //org_name// wird immer auf den ursprünglichen Namen des Elements gesetzt. Der //name// wird um einen Laufindex erweitert.|{{code language="javascript"}}$('[org_name=tf1]'){{/code}}
193 \\
194 {{code language="css"}}[org_name=tf1] {
195 margin: 2px;
196 }{{/code}}
197 |xn|Selektiert den Container eines [[Formularelements>>doc:Formcycle.FormDesigner.FormElements.WebHome]]. Jedes Formularelement befindet sich in einem Container. Dieser enthält neben dem eigentlichen Formularelement auch noch andere Teiles, etwa den Beschreibungstext (Label).|{{code language="javascript"}}$('[xn=tf1]'){{/code}}
198 \\
199 {{code language="css"}}[xn=XTextArea] {
200 font-family: sans-serif;
201 }
202 {{/code}}
203 |cn|Selektiert alle Container von [[Formularelementen>>doc:Formcycle.FormDesigner.FormElements.WebHome]] einer bestimmten Klasse. Eine Liste der Klassen befindet sich unten.|{{code language="javascript"}}$('[cn=XPage]'){{/code}}
204 \\
205 {{code language="css"}}[cn=XTextField]{
206 font-family: serif;
207 }{{/code}}
208 {{/table}}
209
210 == Liste der Klassen ==
211
212 Jede Art von Formularlementtyp hat eine bestimmte CSS-Klasse. Mit dieser können alle Formularelement eines bestimmten Typs selektiert werden.
213
214 {{table dataTypeAlpha="0"}}
215 |=Selektor|=Bemerkung|=Beispiel
216 |XPage|Selektiert alle [[Seiten>>doc:Formcycle.FormDesigner.FormElements.Page]].|{{code language="javascript"}}$(".XPage']")
217 $("[cn='XPage']"){{/code}}
218 |XContainer|Selektiert alle [[Container>>doc:Formcycle.FormDesigner.FormElements.Container]].|{{code language="javascript"}}$(".XContainer']")
219 $("[cn='XContainer']"){{/code}}
220 |XFieldSet|Selektiert alle [[Fieldsets>>doc:Formcycle.FormDesigner.FormElements.Fieldset]].|{{code language="javascript"}}$(".XFieldSet")
221 $("[cn='XFieldSet']"){{/code}}
222 |XSpan|Selektiert alle [[Texte>>doc:Formcycle.FormDesigner.FormElements.Text]].|{{code language="javascript"}}$(".XSpan")
223 $("[cn='XSpan']"){{/code}}
224 |XTextArea|Selektiert alle [[Editoren>>doc:Formcycle.FormDesigner.FormElements.Textarea]].|{{code language="javascript"}}$(".XTextArea")
225 $("[cn='XTextArea']"){{/code}}
226 |XTextField|Selektiert alle [[Eingabefelder>>doc:Formcycle.FormDesigner.FormElements.Input]].|{{code language="javascript"}}$(".XTextField")
227 $("[cn='XTextField']"){{/code}}
228 |XCheckbox|Selektiert alle [[Checkboxen>>doc:Formcycle.FormDesigner.FormElements.Checkbox]].|{{code language="javascript"}}$(".XCheckbox")
229 $("[cn='XCheckbox']"){{/code}}
230 |XSelect|Selektiert alle [[Auswahlelemente>>doc:Formcycle.FormDesigner.FormElements.Selection]].|{{code language="javascript"}}$(".XSelect")
231 $("[cn='XSelect']"){{/code}}
232 |XLine|Selektiert alle [[Trennlinien>>doc:Formcycle.FormDesigner.FormElements.Line]].|{{code language="javascript"}}$(".XLine")
233 $("[cn='XLine']"){{/code}}
234 |XImage|Selektiert alle [[Bilder>>doc:Formcycle.FormDesigner.FormElements.Image]].|{{code language="javascript"}}$(".XImage")
235 $("[cn='XImage']"){{/code}}
236 |XSpacer|Selektiert alle [[Abstandsblöcke>>doc:Formcycle.FormDesigner.FormElements.Spacer]].|{{code language="javascript"}}$(".XSpacer")
237 $("[cn='XSpacer']"){{/code}}
238 |XUpload|Selektiert alle [[Upload-Elemente>>doc:Formcycle.FormDesigner.FormElements.Upload]].|{{code language="javascript"}}$(".XUpload")
239 $("[cn='XUpload']"){{/code}}
240 |XButtonList|Selektiert alle [[Schaltflächen-Leisten>>doc:Formcycle.FormDesigner.FormElements.Button]].|{{code language="javascript"}}$(".XButtonList")
241 $("[cn='XButtonList']"){{/code}}
242 {{/table}}

Navigation

Copyright 2000-2024