This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
en:software:tim:smartform:formmutator [2018/04/18 12:28] Julian Le |
en:software:tim:smartform:formmutator [2021/07/01 09:52] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
===== Formmutator ===== | ===== Formmutator ===== | ||
- | Der Formmutator bietet die Möglichkeit bestimmte Bereiche innerhalb einer Smartform (Tabs) per Onclick ein- bzw auszublenden. Dies ist sowohl mittels Radiobuttons als auch mit Checkboxen umsetzbar, | + | The formmutator offers the possibility to show and hide certain sections in a smartform tab) via onclick. This is reliaziable via radiobuttons as well as checkboxes, |
- | The formmutator offers the possibility to show and hide certain sections in a smartform tab) via onclick. This is reliaziable | + | |
{{:software:tim:smartform:sf_form_mutator_1.png?200 |}}{{:software:tim:smartform:sf_form_mutator_2.png?200|}} | {{:software:tim:smartform:sf_form_mutator_1.png?200 |}}{{:software:tim:smartform:sf_form_mutator_2.png?200|}} | ||
- | In diesem Beispiel ist der grün umrandete Bereich derjenige der ein- bzw ausgeblendet wird. Ermöglicht wird dies durch das Anklicken eines Radiobuttons bzw einer Checkbox. \\ | + | In this example the green bordered section is shown and hidden. This is enabled through clicking on a radiobutton or a checkbox. \\ |
- | Optional können labels auf die Radiobuttons bzw Checkboxen verweisen und diese steuern. Desweiteren können die Radiobuttons bzw Checkboxe ausgeblendet werden, in diesem Fall sind sie dann nur noch über deren label anklickbar. Falls Checkboxen verwendet werden, muss diesen jeweils das Attribut "value=true" zugewiesen werden. | + | Optionally labels can refer to radiobuttons or checkboxes and control these. Furthermore can radiobuttons or checkboxes be hidden, in this case they are only clicable through their label. |
+ | If checkboxes are used, they have to be assigned the attribute "value=true". | ||
==== Smartform ==== | ==== Smartform ==== | ||
Line 117: | Line 117: | ||
</code> | </code> | ||
- | == Notwendige Einstellungen == | + | == Necessary Settings == |
- | 1. Die steuernden Radiobuttons müssen die Klasse "formMutation" haben. \\ | + | 1. The controlling radiobuttons have to have the class "formMutation". \\ |
- | Der Radiobutton, dessen Bereich beim Laden der Smartform angezeigt werden soll muss zusätzlich das Attribut checked="checked" besitzen. Falls der Radiobutton ausgeblendet werden soll, braucht der Radiobutton das Styleattribut "display:none;" \\ | + | The radiobutton, whose section should be shown when loading the smartform, have to have the attribute checked="checked". If the radiobutton should be hidden, it has to have the style attribute "display:none;" \\ |
- | 2. Die ein- und auszublendenden <div>-Elemente benötigen 3 Klassen. \\ | + | 2. The <div>-elements that should be shown and hidden needs 3 classes. \\ |
- | Die erste Klasse ist "display" oder "visibility". Falls die Klasse "display" vergeben wird, wird dem ausgeblendeten <div>-Element das Attribut "display:none" zugewiesen. Falls stattdessen die Klasse "visibility" vergeben wird, wird dem ausgeblendeten <div>-Element das Attribut "visibility:hidden" zugewiesen. | + | The first class is "display" or "visibility". If the class "display" is given, the hidden <div>-element is assigned the attribute "display:none". If the class "visibility" is given instead, the hidden <div>-element is assigned the attribute "visibilty:hidden". |
- | Die zweite Klasse ist die "id" des steuernden Radiobuttons. In diesem Beispiel ist das "right_tab" bzw. "left_tab". | + | The second class is the "id" of the controlling radiobutton. In this example it is "right_tab" or "left_tab". |
- | Die dritte Klasse ist der "name" der Radiobutton-Group. In diesem Beispiel ist das "tabs". | + | The third class is the "name" of the radiobutton group. In this exmaple it is "tabs". |