Skriptbereich - FORMCYCLE Wiki

author	version	line-number	content
1	{{content/}}
2
3	Im Script-Bereich wird //Javascript// verwendet. Zusätzlich wird noch die Bibliothek //jQuery// verwendet, da sich dieses Javaskript-Framework durchgesetzt hat und eine sehr gute Hilfe bereitstellt. //jQuery// nutzt //CSS//-Selektoren zur Selektierung von Elementen.
4
5	Offizielle Webseite von //jQuery//: [[http:~~/~~/jquery.com/>>url:http://jquery.com/]]
6	Offizielle Dokumentation von //jQuery//: [[http:~~/~~/api.jquery.com/>>url:http://api.jquery.com/]]
7	Übersicht zu //CSS//-Selektoren: [[http:~~/~~/www.w3schools.com/cssref/css_selectors.asp>>url:http://www.w3schools.com/cssref/css_selectors.asp]]
8
9	== Hilfeseiten und Tutorials zu jQuery ==
10
11	* [[http:~~/~~/www.jquery-board.de>>url:http://www.jquery-board.de]]
12	* [[http:~~/~~/matthiasschuetz.com/javascript-framework-matrix/de/jquery>>url:http://matthiasschuetz.com/javascript-framework-matrix/de/jquery]]
13	* [[http:~~/~~/www.dpunkt.de/jquery_html/>>url:http://www.dpunkt.de/jquery_html/]]
14
15	== Elementselektierung ==
16
17	Im folgenden sei ein kurzer Überblick gegeben, wie sich Formularelemente von {{formcycle case="dat"/}} mittels //jQuery// selektieren lassen, um mit diesen zu arbeiten. Weitere Information sind im Abschnitt [[Selektoren>>doc:Main.Der Selektor]] zu finden.
18
19	* Der Name, der im {{designer case="dat"/}} einem Formularelement unter //Grundeigenschaften// gegeben wird, wird im DOM dem Element als Wert des Attributs //name// mitgegeben. Um also ein Textfeld mit dem Namen //tf1// zu selektieren, schreibt man {{code language="JAVASCRIPT"}}$('[name="tf1"]'){{/code}}.
20	* Unter //Attribute// lassen sich im Desi{{designer case="dat"/}}gner einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese lässt sich wie üblich zugreifen: {{code language="JAVASCRIPT"}}$('[attribute=value]'){{/code}}. Da diese Selektoren allerdings langsam sein können, sollten diese sparsam genutzt werden.
21	* Einige Formularelemente bestehen aus dem eigentlichen HTML-Element und einem HTML-Element für das //Label//. Um beide zu selektieren, kann das Attribut //xn// verwendet werden. {{code language="JAVASCRIPT"}}$('[xn="tf1"]'){{/code}}.
22	* Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox, ...) verfügt über eine bestimmten CSS-Klasse. Falls man etwa alle //Eingabefelder// selektieren möchte, die sich in einem //Fieldset// befinden, kann man folgendes schreiben: {{code language="JAVASCRIPT"}}$('.XFieldSet .XTextField'){{/code}}.
23	* Es sollte nicht direkt die //id// für die Elementselektierung verwendet werden, da diese von {{formcycle case="dat"/}} dynamisch erzeugt wird und sich jederzeit ändern kann. Aus diesem Grund sollte auch nicht das Attribut //xi// verwendet werden, hier handelt es sich um eine interne ID von {{formcycle case="dat"/}}.
24	* Werden Variablen im {{designer case="dat"/}} vergeben, wird ein verstecktes //Input//-Feld erzeugt, über das sich auch mittels des Attributs //name// zugreifen lässt. Siehe hierzu den Abschnitt [[Variablenbereich>>doc:Formcycle.FormDesigner.CodingPanel.HiddenInputFields]].
25
26	== Autovervollständigung ==
27
28	{{figure image="FCAutoSel.png" width="300"}}
29	Mittels der //Autovervollständigung// können Selektoren für //jQuery// einfacher und schneller eingegeben werden. Hierzu wird die Tastenkombination //Strg// + //Leerzeichentaste// betätigt.
30	{{/figure}}
31
32	Die //Autovervollständigung// macht es einfacher, im Skriptbereich Elemente nach ihrem Namen zu selektieren.
33
34	Um diese Funktion zu verwenden, muss der (Anfang des) Namens des Feldes eingegeben werden, dass selektiert werden soll. Wird nun die die Tastenkombination //Strg//+//Leerzeichentaste// gedrückt, erscheint eine Auswahl der verfügbaren Formularelemente. Nach Auswahl des gewünschten Eintrages wird der Selektor für jQuery für das Element in den Skriptbereich eingefügt.

Im Script-Bereich wird //Javascript// verwendet. Zusätzlich wird noch die Bibliothek //jQuery// verwendet, da sich dieses Javaskript-Framework durchgesetzt hat und eine sehr gute Hilfe bereitstellt. //jQuery// nutzt //CSS//-Selektoren zur Selektierung von Elementen.

4

5

Offizielle Webseite von //jQuery//: [[http:~~/~~/jquery.com/>>url:http://jquery.com/]]

6

Offizielle Dokumentation von //jQuery//: [[http:~~/~~/api.jquery.com/>>url:http://api.jquery.com/]]

7

Übersicht zu //CSS//-Selektoren: [[http:~~/~~/www.w3schools.com/cssref/css_selectors.asp>>url:http://www.w3schools.com/cssref/css_selectors.asp]]

8

9

== Hilfeseiten und Tutorials zu jQuery ==

10

11

* [[http:~~/~~/www.jquery-board.de>>url:http://www.jquery-board.de]]

12

* [[http:~~/~~/matthiasschuetz.com/javascript-framework-matrix/de/jquery>>url:http://matthiasschuetz.com/javascript-framework-matrix/de/jquery]]

13

* [[http:~~/~~/www.dpunkt.de/jquery_html/>>url:http://www.dpunkt.de/jquery_html/]]

14

15

== Elementselektierung ==

16

17

Im folgenden sei ein kurzer Überblick gegeben, wie sich Formularelemente von {{formcycle case="dat"/}} mittels //jQuery// selektieren lassen, um mit diesen zu arbeiten. Weitere Information sind im Abschnitt [[Selektoren>>doc:Main.Der Selektor]] zu finden.

18

19

* Der Name, der im {{designer case="dat"/}} einem Formularelement unter //Grundeigenschaften// gegeben wird, wird im DOM dem Element als Wert des Attributs //name// mitgegeben. Um also ein Textfeld mit dem Namen //tf1// zu selektieren, schreibt man {{code language="JAVASCRIPT"}}$('[name="tf1"]'){{/code}}.

20

* Unter //Attribute// lassen sich im Desi{{designer case="dat"/}}gner einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese lässt sich wie üblich zugreifen: {{code language="JAVASCRIPT"}}$('[attribute=value]'){{/code}}. Da diese Selektoren allerdings langsam sein können, sollten diese sparsam genutzt werden.

21

* Einige Formularelemente bestehen aus dem eigentlichen HTML-Element und einem HTML-Element für das //Label//. Um beide zu selektieren, kann das Attribut //xn// verwendet werden. {{code language="JAVASCRIPT"}}$('[xn="tf1"]'){{/code}}.

22

* Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox, ...) verfügt über eine bestimmten CSS-Klasse. Falls man etwa alle //Eingabefelder// selektieren möchte, die sich in einem //Fieldset// befinden, kann man folgendes schreiben: {{code language="JAVASCRIPT"}}$('.XFieldSet .XTextField'){{/code}}.

23

* Es sollte nicht direkt die //id// für die Elementselektierung verwendet werden, da diese von {{formcycle case="dat"/}} dynamisch erzeugt wird und sich jederzeit ändern kann. Aus diesem Grund sollte auch nicht das Attribut //xi// verwendet werden, hier handelt es sich um eine interne ID von {{formcycle case="dat"/}}.

24

* Werden Variablen im {{designer case="dat"/}} vergeben, wird ein verstecktes //Input//-Feld erzeugt, über das sich auch mittels des Attributs //name// zugreifen lässt. Siehe hierzu den Abschnitt [[Variablenbereich>>doc:Formcycle.FormDesigner.CodingPanel.HiddenInputFields]].

25

26

== Autovervollständigung ==

27

28

29

Mittels der //Autovervollständigung// können Selektoren für //jQuery// einfacher und schneller eingegeben werden. Hierzu wird die Tastenkombination //Strg// + //Leerzeichentaste// betätigt.

30

31

32

Die //Autovervollständigung// macht es einfacher, im Skriptbereich Elemente nach ihrem Namen zu selektieren.

33

34

Um diese Funktion zu verwenden, muss der (Anfang des) Namens des Feldes eingegeben werden, dass selektiert werden soll. Wird nun die die Tastenkombination //Strg//+//Leerzeichentaste// gedrückt, erscheint eine Auswahl der verfügbaren Formularelemente. Nach Auswahl des gewünschten Eintrages wird der Selektor für jQuery für das Element in den Skriptbereich eingefügt.

Wiki-Quellcode von Skriptbereich

Navigation