Kommentar-Formular im Accordion: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Accordion und das Kommentar-Formular (Eingabemaske))
K (div. Korrekturen)
Zeile 1: Zeile 1:
 
[[Category:Admin HOWTOS]]
 
[[Category:Admin HOWTOS]]
{{AppliesTo
+
{{AppliesTo|Version=Contao 2.9.3}}
|Version=Contao 2.9.3}}
+
== Accordion und das Kommentar-Formular (Eingabemaske)==
+
  
 
+
=Accordion und das Kommentar-Formular (Eingabemaske)=
Möchte man ein 'zugeklapptes Accordion' in Zusammenhang mit dem Kommentar-System nutzen, steht man vor einem Problem.
+
Möchte man ein 'zugeklapptes Accordion' in Zusammenhang mit dem Kommentar-System nutzen, steht man vor einem Problem.<br />
Bei fehlerhafter oder auch erfolgreicher Eingabe der Formular-Daten, sieht man nicht den Aktionsstatus nach dem Absenden des Formulares,da sich das Accordion wieder zuklappt und die Statusmeldung wie z.B.:  
+
Bei fehlerhafter oder auch erfolgreicher Eingabe der Formular-Daten, sieht man nicht den Aktionsstatus nach dem Absenden des Formulars, da sich das Accordion wieder zuklappt und die Statusmeldung wie z.B.:<br />
 
"''Bitte füllen Sie das Feld "Name" aus!''" oder "''Ihr Kommentar wurde hinzugefügt....''" sich dadurch der Ansicht entziehen.
 
"''Bitte füllen Sie das Feld "Name" aus!''" oder "''Ihr Kommentar wurde hinzugefügt....''" sich dadurch der Ansicht entziehen.
  
[[Datei:Accordion_in_formularen.gif]]
+
[[Datei:Accordion_in_formularen.gif|center|frame|Accordion in Formularen]]
  
 
Lösung hierfür ist es, das automatische Zuklappen des Accordions zu verhindern, sofern eine Statusnachricht ausgegeben wurde.
 
Lösung hierfür ist es, das automatische Zuklappen des Accordions zu verhindern, sofern eine Statusnachricht ausgegeben wurde.
Zeile 15: Zeile 13:
 
{{Hinweis|Scroller-Position}}
 
{{Hinweis|Scroller-Position}}
 
''Zusätzlich könnte das Problem auftreten (gerade bei dem Kommentar-System), dass die Eingabemaske für Kommentare weit unten in der Seite platziert ist.
 
''Zusätzlich könnte das Problem auftreten (gerade bei dem Kommentar-System), dass die Eingabemaske für Kommentare weit unten in der Seite platziert ist.
Damit die ausgebenen Statusinformationen auch gleich sichtbar sind, springt der Browser zur der gewünschten stelle im Dokument.''
+
Damit die ausgegebenen Statusinformationen auch gleich sichtbar sind, springt der Browser zu der gewünschten Stelle im Dokument.''
  
==Bearbeitung des Javascript-Templates '''''moo_accordion.tpl'''''==
+
=Bearbeitung des Javascript-Templates '''''moo_accordion.tpl'''''=
  
 
<source lang="javascript">
 
<source lang="javascript">
Zeile 68: Zeile 66:
  
 
----
 
----
Erstellt von: [http://de.contaowiki.org/Benutzer:Ways2web ways2web]
+
Erstellt von: [[Benutzer:Ways2web|ways2web]]
  
 
[[Datei:Ways2web_signatur.png|link=http://www.ways2web.de |ways2web.de]]
 
[[Datei:Ways2web_signatur.png|link=http://www.ways2web.de |ways2web.de]]

Version vom 30. Januar 2011, 23:59 Uhr


betrifft
Contao Version Contao 2.9.3


Accordion und das Kommentar-Formular (Eingabemaske)

Möchte man ein 'zugeklapptes Accordion' in Zusammenhang mit dem Kommentar-System nutzen, steht man vor einem Problem.
Bei fehlerhafter oder auch erfolgreicher Eingabe der Formular-Daten, sieht man nicht den Aktionsstatus nach dem Absenden des Formulars, da sich das Accordion wieder zuklappt und die Statusmeldung wie z.B.:
"Bitte füllen Sie das Feld "Name" aus!" oder "Ihr Kommentar wurde hinzugefügt...." sich dadurch der Ansicht entziehen.

Accordion in Formularen

Lösung hierfür ist es, das automatische Zuklappen des Accordions zu verhindern, sofern eine Statusnachricht ausgegeben wurde.


Hinweis.png Hinweis: Scroller-Position

Zusätzlich könnte das Problem auftreten (gerade bei dem Kommentar-System), dass die Eingabemaske für Kommentare weit unten in der Seite platziert ist. Damit die ausgegebenen Statusinformationen auch gleich sichtbar sind, springt der Browser zu der gewünschten Stelle im Dokument.

Bearbeitung des Javascript-Templates moo_accordion.tpl

<script type="text/javascript">
<!--//--><![CDATA[//><!--
 
window.addEvent('load', function() {
 
  var sErr = $$('p.error'),    // HTML Element für Statusmeldung bei Fehlern 
      sCon = $$('p.confirm'),  // HTML Element für Statusmeldungen bei Erfolg
      scrollElem = sErr.length ? sErr[0] : sCon.length ? sCon[0] : null;
 
  var acc = new Accordion($$('div.toggler'), $$('div.accordion'), {
    alwaysHide: true,
    opacity: false,
    display: sErr.length || sCon.length ? 0 : -1, // Wenn Statusmeldung vorhanden ist, dann "Accordion öffnen", sonst "Accordion schließen"
    onActive: function(toggler,elem) {
      toggler.addClass('active');
    },
    onBackground: function(toggler,elem) {
		  toggler.removeClass('active');
    }
  });
 
  if(scrollElem) {
    acc.addEvent('complete', function() { // Sobald das Accordion geladen ist
      window.scrollTo(0, scrollElem.getPosition().y); // wird zur Formularposition gesprungen
    });
  }
 
  $$('div.toggler').each(function(elem){
	elem.addEvents({
		'mouseenter': function(){
			elem.addClass('hover');
		},
		'mouseleave': function(){
			elem.removeClass('hover');
		}
	});
  });
 
 
});
//--><!]]>
</script>



Erstellt von: ways2web

ways2web.de

Ansichten
Meine Werkzeuge

Contao Community Documentation

irgendwie ist das Leben nicht fair...ich mache eine Webseite über Toilettenreinigung und Martin stellt Fotos für eine Schönheitswebseite frei...

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge