Wiki-Quellcode von Selektoren

Zeige letzte Bearbeiter
1 {{content/}}
2
3 Im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] kann über {{smallcaps}}Css{{/smallcaps}}-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 {{smallcaps}}Css{{/smallcaps}}-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann auch mit //JavaScript //auf Formularelemente zugegriffen werden.
4
5 Weitere Informationen zu {{smallcaps}}Css{{/smallcaps}} und weiterführende Links sind im [[Abschnitt zum {{smallcaps}}Css{{/smallcaps}}-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 language="none"}}[value]{{/code}} verwendet. Um nur die zu selektieren, bei den das Attribut auf einen bestimmten Wert gesetzt ist, wird {{code language="none"}}[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 language="none"}}={{/code}} der Operator {{code language="none"}}$={{/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 language="none"}}class{{/code}}. Dies wird auch oft {{smallcaps}}Css{{/smallcaps}}-Klasse bezeichnet. Hier können mehrere frei vergebbare Klassen gelistet werden, getrennt mit einem Leerzeichen. Im {{smallcaps}}Css{{/smallcaps}} 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 language="none"}}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 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.
114
115 {{code language="Javascript"}}
116 // Alle Eingabefelder verstecken
117 $('input[type=text]').visible(false)
118
119 // Element mit Namen Postleitzahl als Mussfeld schalten
120 $("[name='Postleitzahl']").setRequired(true)
121 {{/code}}
122
123 === Generische JavaScript-Funktionalität ===
124
125 {{figure image="designer_selectors_prefill_de.png"}}
126 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.
127 {{/figure}}
128
129 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.
130
131 {{js}}
132 for (const element of $("[data-user]")) {
133 const prop = element.dataset.user;
134 const value = XFC_METADATA.currentUser[prop];
135 if (value && !element.value) {
136 element.value = value;
137 }
138 }
139 {{/js}}
140
141 {{jsIE}}
142 $("[data-user]").each(function(_, element) {
143 var prop = $(element).data("user");
144 var value = XFC_METADATA.currentUser[prop];
145 if (value && !element.value) {
146 element.value = value;
147 }
148 });
149 {{/jsIE}}
150
151 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).
152
153 == Selektoren für Formularlemente ==
154
155 Hier findet sich eine Auflistung für häufig verwendete Selektoren in {{formcycle/}}.
156
157 {{table dataTypeAlpha="0"}}
158 |=Selektor|=Bemerkung|=Beispiel (jQuery / CSS)
159 |FORM.xm-form|Selektiert das gesamte Formular.|{{code language="javascript"}}$('FORM.xm-form'){{/code}}
160 \\
161 {{code language="css"}}FORM.xm-form {
162 font-family: Arial;
163 }{{/code}}
164 |.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}}
165 \\
166 {{code language="css"}}.XPage {
167 background-color: #EEE;
168 }{{/code}}
169 |.required-star**|Selektiert alle Elemente, die den Stern darstellen, der an einem Mussfeld angezeigt wird.|{{code language="javascript"}}$('.required-star'){{/code}}
170 \\
171 {{code language="css"}}.required-star {
172 color: red;
173 }{{/code}}
174 |.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//.
175 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}}
176 \\
177 {{code language="css"}}.xm-item-div {
178 font-size: 1.2em;
179 }{{/code}}
180 |.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//.
181 \\Hiermit können alle Container einer bestimmten Art von Formularelement selektiert werden.
182 \\Eine Auflistung der Klassen findet sich unten.|{{code language="javascript"}}$('[.CXTextField]')
183 $('[.CXCheckbox]')
184 $('[.CXImage]'){{/code}}
185 \\
186 {{code language="css"}}.CXCheckbox label {
187 color: #aaa;
188 }{{/code}}
189 |.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}}
190 \\
191 {{code language="css"}}.xm-form-row {
192 border-style: solid;
193 }{{/code}}
194 |name|
195 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}}
196 \\
197 {{code language="css"}}[name=element]{
198 font-weight: 700;
199 }{{/code}}
200 |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}}
201 \\
202 {{code language="css"}}[org_name=tf1] {
203 margin: 2px;
204 }{{/code}}
205 |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}}
206 \\
207 {{code language="css"}}[xn=XTextArea] {
208 font-family: sans-serif;
209 }
210 {{/code}}
211 |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}}
212 \\
213 {{code language="css"}}[cn=XTextField]{
214 font-family: serif;
215 }{{/code}}
216 {{/table}}
217
218 == Liste der Klassen ==
219
220 Jede Art von Formularlementtyp hat eine bestimmte {{smallcaps}}Css{{/smallcaps}}-Klasse. Mit dieser können alle Formularelement eines bestimmten Typs selektiert werden.
221
222 {{table dataTypeAlpha="0" preSort="0-asc"}}
223 |=Selektor|=Bemerkung|=Beispiel
224 |XHeader|Selektiert das Kopfzeilenelement des Formulars. Die Kopfzeile wird immer überhalb des Formulars angezeigt, unabhängig davon, welche Formularseite aktuell angezeigt wird.|{{code language="javascript"}}$(".XHeader']"){{/code}}
225 |XFooter|Selektiert das Fußzeilenelement des Formulars. Die Fußzeile wird immer unterhalb des Formulars angezeigt, unabhängig davon, welche Formularseite aktuell angezeigt wird.|{{code language="javascript"}}$(".XFooter']"){{/code}}
226 |XPage|Selektiert alle [[Seiten>>doc:Formcycle.FormDesigner.FormElements.Page]].|{{code language="javascript"}}$(".XPage']")
227 $("[cn='XPage']"){{/code}}
228 |XContainer|Selektiert alle [[Container>>doc:Formcycle.FormDesigner.FormElements.Container]].|{{code language="javascript"}}$(".XContainer']")
229 $("[cn='XContainer']"){{/code}}
230 |XFieldSet|Selektiert alle [[Fieldsets>>doc:Formcycle.FormDesigner.FormElements.Fieldset]].|{{code language="javascript"}}$(".XFieldSet")
231 $("[cn='XFieldSet']"){{/code}}
232 |XSpan|Selektiert alle [[Texte>>doc:Formcycle.FormDesigner.FormElements.Text]].|{{code language="javascript"}}$(".XSpan")
233 $("[cn='XSpan']"){{/code}}
234 |XTextArea|Selektiert alle [[Editoren>>doc:Formcycle.FormDesigner.FormElements.Textarea]].|{{code language="javascript"}}$(".XTextArea")
235 $("[cn='XTextArea']"){{/code}}
236 |XTextField|Selektiert alle [[Eingabefelder>>doc:Formcycle.FormDesigner.FormElements.Input]].|{{code language="javascript"}}$(".XTextField")
237 $("[cn='XTextField']"){{/code}}
238 |XCheckbox|Selektiert alle Formularelemente vom Typ [[Checkbox>>doc:Formcycle.FormDesigner.FormElements.Checkbox]].|{{code language="javascript"}}$(".XCheckbox")
239 $("[cn='XCheckbox']"){{/code}}
240 |XSelect|Selektiert alle [[Auswahlelemente>>doc:Formcycle.FormDesigner.FormElements.Selection]].|{{code language="javascript"}}$(".XSelect")
241 $("[cn='XSelect']"){{/code}}
242 |XDropDown|Selektiert das SELECT-Element eines Auswahlfelds (//XSelect//), wenn dieses als //Drop-Down-Auswahlliste// dargestellt wird.|{{code language="javascript"}}$(".XDropDown"){{/code}}
243 |XList|Selektiert das SELECT-Element eines Auswahlfelds (//XSelect//), wenn dieses als //Liste mit allen Optionen// dargestellt wird.|{{code language="javascript"}}$(".XList"){{/code}}
244 |XCheckbox|Selektiert zudem auch alle DIV-Container-Elemente eines Auswahlfelds (//XSelect//), wenn dieses als //Checkboxen// dargestellt wird.|{{code language="javascript"}}$(".XCheckbox"){{/code}}
245 |XRadio|Selektiert das DIV-Container-Element mit allen Radio-Buttons eines Auswahlfelds (//XSelect//), wenn dieses als //Radio buttons// dargestellt wird.|{{code language="javascript"}}$(".XRadio"){{/code}}
246 |CXTable|Selektiert das DIV-Container-Element mit allen Fragen eines Auswahlfelds (//XSelect//), wenn dieses als //Fragen// dargestellt wird.|{{code language="javascript"}}$(".CXTable"){{/code}}
247 |XLine|Selektiert alle [[Trennlinien>>doc:Formcycle.FormDesigner.FormElements.Line]].|{{code language="javascript"}}$(".XLine")
248 $("[cn='XLine']"){{/code}}
249 |XImage|Selektiert alle [[Bilder>>doc:Formcycle.FormDesigner.FormElements.Image]].|{{code language="javascript"}}$(".XImage")
250 $("[cn='XImage']"){{/code}}
251 |XSpacer|Selektiert alle [[Abstandsblöcke>>doc:Formcycle.FormDesigner.FormElements.Spacer]].|{{code language="javascript"}}$(".XSpacer")
252 $("[cn='XSpacer']"){{/code}}
253 |XUpload|Selektiert alle [[Upload-Elemente>>doc:Formcycle.FormDesigner.FormElements.Upload]].|{{code language="javascript"}}$(".XUpload")
254 $("[cn='XUpload']"){{/code}}
255 |XButtonList|Selektiert alle [[Schaltflächen-Leisten>>doc:Formcycle.FormDesigner.FormElements.Button]].|{{code language="javascript"}}$(".XButtonList")
256 $("[cn='XButtonList']"){{/code}}
257 {{/table}}

Navigation

Copyright 2000-2024