Accordion Mootools Bsp.

Verschachtelte Custom Blöcke am Beispiel Accordion:

Es wird die Möglichkeit geboten, mehrere CPs innerhalb eines Tabs einzusetzen.

• Ab Version 1.4.4 r381
• Mootools V1.2.x

Siehe auch: Accordion Tabs (Mootools V1.2x) im CP Register/Tabs. Accordion Tabs (MooTools v1.2x/V1.4x)

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:

• Seitenlayout: Anlage der Custom-Blöcke
• Vorlage: Befüllen der Custom-Blöcke (
• Vorlage: Einsetzen des Master Custom-Blocks in Haupt:
• Artikel: Anlegen der HTML-CPs die die TAB-Überschrift bilden und einsetzen der Platzhalter {AACO-01} {ACCO-02} ….
• CP-Template HTML: Überschrift und Contentbox entsprechend den Accordion-Anforderungen einsetzen
• Artikel-CPs: Anlegen der CPs mit Ausgabe: in “ACCO-01” oder “ACCO-02” oder …..

Seitenlayout:

Anlegen der Blöcke: ACCORDION, ACCO-01, ACCO-02, ACCO-03, ACCO-04, ACCO-05, ACCO-06 (Die Bezeichnungen können natürlich auch anders lauten, dann bitte in allen Bereichen analog dazu ersetzen).

Vorlage:

Nachdem die Blöcke im Seitenlayout angelegt wurden, sind diese in allen Vorlagen verfügbar.
Custom-Blöcken haben die Eigenart, dass wenn diese Blöcke von keinem CP angesprochen werden auch der Umschließende Inhalt der Blöcke nicht ausgeliefert wird.

Z.B. würde der Block {ACCORDION} mit seinen Anweisung wie [PHP]…[/PHP] oder auch die <div> Container nur abgearbeitet, wenn dieser Block von einem CP der aktuellen Seite angefordert wird. In “Haupt:” wird in diesem Fall der Platzhalter {ACCORDION} beim Renderprozess nicht berücksichtigt bzw. er wird gelöscht.

Einige Leute fragen sich bestimmt, weshalb im Block {ACCORDION} noch einmal {ACCORDION} stehen muss: An diese Stelle wird der Inhalt des aufrufenden CPs eingesetzt

{ACCORDION} wird in “Haupt:” an der Stelle platziert, an der die Ausgabe des Accordions stattfinden soll. (I.d.R. nahe {CONTENT}).

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>

Hier ein CP “Text mit Bild”:

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');
        }
    });
});

Um den aktiven Block mit einem Klick auf sich selbst wieder schließen zu können:

opacity: false, alwaysHide: true, show: -1,

Optionen: Class: Fx.Accordion

Wir verwenden anstatt dem Custom-Block {ACCORDION} in der Vorlage einen weiteren HTML-CP innerhalb dieses Artikels, in dessen Textfeld {ACCORDION} eingetragen wird. Das Ausgabeziel ist {CONTENT}.

Der Vorteil besteht darin, dass der Inhalt nun in {CONTENT} geschrieben und kein separater Tag {ACCORDION} in “Haupt:” benötigt wird.

Inhalt des Template für diesen CP: template/inc_cntpart/html/accordion01.tmpl

[HTML]
[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">
{HTML}
</div>
</div>
[/HTML]

Der Custom-Block {ACCORDION} wird nun geleert (nicht gelöscht) bis auf den Tag {ACCORDION}.

<note> In “Haupt:” wird der Platzhalter {ACCORDION} entfernt.
</note>

Eine dritte Variante wäre die Verwendung des CPs Register-Tab anstatt der HTML-CPs.