Kommentar-Formular im Accordion: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(→Bearbeitung des Javascript-Templates moo_accordion.tpl) |
K (→Bearbeitung des Javascript-Templates moo_accordion.tpl) |
||
Zeile 64: | Zeile 64: | ||
− | |||
---- | ---- |
Aktuelle Version vom 10. Februar 2011, 13:04 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.
Lösung hierfür ist es, das automatische Zuklappen des Accordions zu verhindern, sofern eine Statusnachricht ausgegeben wurde.
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
PS: Danke Florian