NAVIGATION
This is an old revision of the document!
Verschachtelte Custom Blöcke am Beispiel Accordion:
Es wird die Möglichkeit geboten, mehrere CPs innerhalb eines Tabs einzusetzen.
Frontend-Ausgabe:
Dazu nutzen wir die Möglichkeit Custom-Blöcke kurz CuBl zu verschachteln. Dies kann nicht direkt passieren, also wir können keinen CuBl in der Vorlage direkt in einen anderen CuBl schreiben. Daher verwenden wir einen HTML-CP der diese Aufgabe übernimmt (Siehe unten).
Ablauf:
Der CuBl {ACCORDION} bildet den Master-Block, der den Inhalt des gesamten Accordions aufnimmt und ausliefert.
Die HTML-CPs bilden die TAB-Überschriften und nehmen in ihrem Content die Platzhalter der sekundären Custom-Blöcke {ACCO-01}, ACCO-02} … auf.
Diese sekundären Blöcke dienen den CPs die in den einzelnen TABs erscheinen sollen als Ausgabeziel (Das ist die Verschachtelung).
Vorgehensweise:
Vorlage:
{ACCORDION} wird in “Haupt:” an der Stelle platziert, an der die Ausgabe des Accordions stattfinden soll. (I.d.R. nahe {CONTENT}).
[PHP] // ---- Init Moore function v2 $js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion'; renderHeadJS($js); // ---- Loading the right CSS-file. $GLOBALS['block']['css']['cust_block_accordion01'] = 'specific/mootools/cust_block_accordion01.css'; // ---- Loading the JS Plugin initJSPlugin('AccordionTabs01'); [/PHP] <!-- ====== ACCORDION ====== //--> <div class="cb_content"> <div id="accordion"> {ACCORDION} </div> </div>
Template: template/inc_cntpart/html/custom_block_accordion.tmpl
[TITLE]<h3 class="toggler" title="{TITLE}">{TITLE}</h3>[/TITLE] [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] <div class="element"> [HTML]{HTML}[/HTML] </div>
Datei: template/inc_css/specific/mootools/cust_block_accordion01.css
.cb_content { font-size:1em; line-height:135%; margin:10px 35px 0pt 20px; padding: 10px 10px 10px 10px; position:relative; z-index:5; width: 600px; border: 1px solid #888; background-color: #FAFFEF; } .cb_content #accordion { margin:20px 0px; } .cb_content h3.toggler { cursor: pointer; border: 1px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; font-family: 'Andale Mono', sans-serif; font-size: 12px; background: #D2E0E6; /* background: #C3DFCC; */ color: #528CE0; margin: 0 0 4px 0; padding: 3px 5px 1px; } .cb_content h3.accordion-selected { cursor: pointer; border: 1px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; background: #A7CFDF; color: #355A8F; } .cb_content h3.toggler:hover { cursor: pointer; border: 1px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; background: #A8C5CF; color: #2F507F; } .cb_content .element p, .cb_content .element h4 { margin:0px; padding:4px; } .cb_content blockquote { padding:5px 20px; }
Datei: template/lib/mootools/plugin-1.2/mootools.AccordionTabs01.js
/* MooTools V1.2 */ window.addEvent('domready', function() { //create our Accordion instance var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', { opacity: false, onActive: function(toggler, element){ toggler.addClass('accordion-selected'); }, onBackground: function(toggler, element){ toggler.removeClass('accordion-selected'); } }); });