| ... |
... |
@@ -1,47 +45,3 @@ |
| 1 |
|
-{{html clean="false"}} |
| 2 |
|
- <style type="text/css"> |
| 3 |
|
- pre{ |
| 4 |
|
- margin:0; |
| 5 |
|
- } |
| 6 |
|
- |
| 7 |
|
- .xm-form{ |
| 8 |
|
- margin:0 auto; |
| 9 |
|
- } |
| 10 |
|
- |
| 11 |
|
- .extra .hljs-string{ |
| 12 |
|
- font-weight:bold; |
| 13 |
|
- color:red; |
| 14 |
|
- } |
| 15 |
|
- |
| 16 |
|
- iframe, .hljs{ |
| 17 |
|
- max-width:700px; |
| 18 |
|
- border:2px solid #515151; |
| 19 |
|
- } |
| 20 |
|
- |
| 21 |
|
- .hljs{ |
| 22 |
|
- max-width:985px; |
| 23 |
|
- text-align:center; |
| 24 |
|
- } |
| 25 |
|
- |
| 26 |
|
- .resizer { |
| 27 |
|
- display:flex; |
| 28 |
|
- margin:0; |
| 29 |
|
- padding:0; |
| 30 |
|
- resize:both; |
| 31 |
|
- overflow:hidden |
| 32 |
|
- } |
| 33 |
|
- |
| 34 |
|
- .resizer > .resized { |
| 35 |
|
- flex-grow:1; |
| 36 |
|
- margin:0; |
| 37 |
|
- padding:0; |
| 38 |
|
- border:0; |
| 39 |
|
- height: inherit; |
| 40 |
|
- } |
| 41 |
|
- .border { border:4px dashed black; } |
| 42 |
|
- </style> |
| 43 |
|
-{{/html}} |
| 44 |
|
- |
| 45 |
45 |
== 1. Externen Kontext via iFrame einbinden z.B. == |
| 46 |
46 |
|
| 47 |
47 |
[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]] |
| ... |
... |
@@ -52,8 +52,8 @@ |
| 52 |
52 |
|
| 53 |
53 |
{{code language="javascript"}} |
| 54 |
54 |
function myFormCycleCallback(msg){ |
| 55 |
|
- $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); |
| 56 |
|
- renderForm(msg.data); |
|
11 |
+ $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); |
|
12 |
+ renderForm(msg.data); |
| 57 |
57 |
} |
| 58 |
58 |
|
| 59 |
59 |
window.addEventListener("message", myFormCycleCallback, false); |
| ... |
... |
@@ -106,9 +106,7 @@ |
| 106 |
106 |
== 5. Ergebenis Formular: == |
| 107 |
107 |
|
| 108 |
108 |
{{html clean="false"}} |
| 109 |
|
- <div class="resizer border" style="height: 1000px;"> |
| 110 |
|
- <iframe id="content" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> |
| 111 |
|
- </div> |
|
65 |
+ <div class="hljs" id="content"></div> |
| 112 |
112 |
{{/html}} |
| 113 |
113 |
|
| 114 |
114 |
|
| ... |
... |
@@ -115,6 +115,54 @@ |
| 115 |
115 |
|
| 116 |
116 |
|
| 117 |
117 |
|
| 118 |
|
-Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt. |
| 119 |
119 |
|
| 120 |
120 |
|
|
74 |
+Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt: |
|
75 |
+ |
|
76 |
+{{html clean="false"}} |
|
77 |
+ <style type="text/css"> |
|
78 |
+ pre{ |
|
79 |
+ margin:0; |
|
80 |
+ } |
|
81 |
+ |
|
82 |
+ .xm-form{ |
|
83 |
+ margin:0 auto; |
|
84 |
+ } |
|
85 |
+ |
|
86 |
+ .extra .hljs-string{ |
|
87 |
+ font-weight:bold; |
|
88 |
+ color:red; |
|
89 |
+ } |
|
90 |
+ |
|
91 |
+ iframe, .hljs{ |
|
92 |
+ max-width:700px; |
|
93 |
+ border:2px solid #515151; |
|
94 |
+ } |
|
95 |
+ |
|
96 |
+ .hljs{ |
|
97 |
+ max-width:985px; |
|
98 |
+ text-align:center; |
|
99 |
+ } |
|
100 |
+ |
|
101 |
+ .resizer { |
|
102 |
+ display:flex; |
|
103 |
+ margin:0; |
|
104 |
+ padding:0; |
|
105 |
+ resize:both; |
|
106 |
+ overflow:hidden |
|
107 |
+ } |
|
108 |
+ |
|
109 |
+ .resizer > .resized { |
|
110 |
+ flex-grow:1; |
|
111 |
+ margin:0; |
|
112 |
+ padding:0; |
|
113 |
+ border:0; |
|
114 |
+ height: inherit; |
|
115 |
+ } |
|
116 |
+ .border { border:4px dashed black; } |
|
117 |
+ </style> |
|
118 |
+ |
|
119 |
+ <div class="resizer border" style="height: 1000px;"> |
|
120 |
+ <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> |
|
121 |
+ </div> |
|
122 |
+{{/html}} |
