Wiki-Quellcode von Schaltfläche
Zeige letzte Bearbeiter
author | version | line-number | content |
---|---|---|---|
1 | {{panel float="right"}} | ||
2 | (% class="block text-align-center%){{ficon name="XButtonList" size="4em"/}} | ||
3 | |||
4 | (% class="block%)Das Symbol für Formularelemente vom Typ //Schaltfläche//. | ||
5 | {{/panel}} | ||
6 | |||
7 | == Funktionsweise == | ||
8 | |||
9 | Formularelemente vom Typ //Schaltfläche// fügen Schaltflächen in das aktuelle Formular ein. Wird das Formularelement in das Formular gezogem, sind zuerst zwei Schaltflächen vorhanden. Sie können aber beliebig viele Schaltflächen hinzufügen oder löschen, in dem Sie im Bereich //Werte// Einträge hinzufügen oder löschen | ||
10 | |||
11 | Für jede Schaltfläche kann zudem eine Aktion festgelegt werden, um das Formular zwischenzuspeichern, abzusenden oder auf eine andere Seite zu wechseln. Dies ist genauer im Abschnitt //Werte// beschrieben. | ||
12 | |||
13 | {{internBaseOptionsElement page="base"}} | ||
14 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
15 | |=Name|=Beschreibung | ||
16 | |Ausrichtung|Ändert die Ausrichtung (links, rechts, mitte) der Schaltflächen. | ||
17 | {{/table}} | ||
18 | {{/internBaseOptionsElement}} | ||
19 | |||
20 | {{figure image="eigenschaften_btn_0.png" width="200"}} | ||
21 | Für jede Schaltfläche kann ein Text eingegeben werden, der im Formular anzeigt wird, und der Name, der intern im HTML verwendet wird. Zudem kann noch festgelegt werden, was passieren soll, wenn die Schaltfläche betätigt wird. | ||
22 | {{/figure}} | ||
23 | |||
24 | {{internBaseOptionsElement page="val"}} | ||
25 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
26 | |=Name|=Beschreibung | ||
27 | |Text|Die Beschriftung der Schaltfläche, so wie sie im Formular angezeigt wird. | ||
28 | |Name|Der Wert des HTML-Attributs //name//, welches das //input//-Element im HTML erhalten soll. Dieser Name auch genutzt werden, um im Javaskript oder CSS auf die Schaltfläche zuzugreifen. Beispielsweise sorgt das CSS {{code language="css"}}[name=btnSubmit] { width:100%;}{{/code}} dafür, dass die Schaltfläche mit dem Namen //btnSubmit// die volle Breite einnimmt. | ||
29 | |Aktion|Die Aktion, die ausgeführt werden soll, wenn die Schaltfläche betätigt wird. | ||
30 | {{/table}} | ||
31 | |||
32 | === Hinzufügen und Löschen von Schaltflächen | ||
33 | |||
34 | Um eine Schaltfläche zu löschen, betätigen Sie das Papierkorb-Symbol {{icon name="trash"/}} links. Klicken Sie auf die leere letzte Zeile, um eine Schaltfläche hinzuzufügen. Weiterhin kann die Reihenfolge der Schaltflächen verändert werden, indem Sie eine Schaltfläche mittels Drag&Drop durch Klick auf das Papierkorb-Symbol an eine andere Selle ziehen. | ||
35 | |||
36 | === Vorhandene Aktionen | ||
37 | |||
38 | Jede Schaltfläche kann eine Aktion zugeordnet werden. Jede Aktion kann mit oder ohne Prüfung des Formulars erfolgen. Bei der Prüfung des Formular wird geprüft, ob alle Mussfelder ausgefüllt wurden und keine Formularfelder mit fehlerhaften Eingaben (Validierung der Datentypen) mehr vorliegen. | ||
39 | |||
40 | Es stehen die folgenden Aktionen zur Verfügung. | ||
41 | |||
42 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
43 | |=Name|=Beschreibung | ||
44 | |keine Aktion|Es wird keine Aktion bei Klick auf die Schaltfläche ausgeführt. Diese Option kann verwendet werden, wenn eine eigene Aktionen mittels //Javaskript// implementiert werden soll. Das folgende Beispiel gibt eine kurze Nachricht aus, wenn die Schaltfläche mit dem Namen //btnNext// gedrückt wird. | ||
45 | {{code language="Javascript"}} | ||
46 | $('[name=btnNext]').click(function() { | ||
47 | alert("Der Knopf mit Namen btnNext wurde gedrückt.") | ||
48 | }) | ||
49 | {{/code}} | ||
50 | |Seite <NAME>|Wechselt auf die Seite mit dem angegebenen Namen. Jede im Formular angelegte Seite erscheint mit Namen in der Auswahlliste. | ||
51 | |Seite >NAME> + prüfen|Wechselt nur auf die Seite mit dem angegebenen Namen, wenn die derzeitige Seite keine fehlerhaften Eingaben enthält. | ||
52 | |absenden|Sendet das Formular an den Server und legt dort einen Vorgang an. Das Formular wird auch abgesendet, egal ob es noch fehlerhafte Formularfelder gibt oder nicht. | ||
53 | |absenden + prüfen|Sendet das Formular nur an den Server, wenn das Formular keine fehlerhaften Eingaben mehr enthält. | ||
54 | |absenden o. speichern|Sendet das Formular an den Server, legt aber keinen Vorgang an. Diese Aktion sollte verwendet werden, wenn Sie die Formulardaten zwar in der [[Aktionsverarbeitung>>doc:Main.Status und Aktionsverarbeitung ]] verarbeiten möchten, aber keinen dauerhaften Vorgang anlegen wollen. | ||
55 | |absenden popup o. speichern|Sendet das Formular an den Server und öffnet die Antwortseite als //Pop-Up//, legt aber keinen Vorgang an. Falls allerdings noch fehlerhaften Eingaben im Formular vorhanden sind, wird es nicht abgesendet. Diese Aktion sollte verwendet werden, wenn Sie die Formulardaten zwar in der [[Aktionsverarbeitung>>doc:Main.Status und Aktionsverarbeitung ]] verarbeiten, aber keinen dauerhaften Vorgang anlegen möchten. Über das //Pop-Up-Fenster// wird in der Regel eine Datei zum Download angeboten. Siehe [[Datei ausliefern.>>doc:Datei ausliefern]] | ||
56 | |speichern|Speichert den Formularinhalt zur späteren Weiterverarbeitung auf dem Server. Das Formular wird auch abgesendet, egal ob es noch fehlerhafte Formularfelder gibt oder nicht. | ||
57 | |speichern + prüfen|Speichert den Formularinhalt zur späteren Weiterverarbeitung auf dem Server nur dann, wenn das Formular keine fehlerhaften Eingaben mehr enthält. | ||
58 | {{/table}} | ||
59 | {{/internBaseOptionsElement}} | ||
60 | |||
61 | {{internBaseOptionsElement page="cond"/}} | ||
62 | |||
63 | {{internBaseOptionsElement page="css"/}} | ||
64 | |||
65 | {{internBaseOptionsElement page="attr"/}} | ||
66 | |||
67 | {{internBaseOptionsElement page="avail"/}} | ||
68 | |||
69 | {{internBaseOptionsElement page="misc"/}} | ||
70 | |||
71 | {{content moveToTop="true"/}} |