This is an old revision of the document!


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

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 …..


Custom Blöcke anlegen:

Seitenlayout:

Anlegen der Blöcke: ACCORDION, ACCO-01, ACCO-02, ACCO-03, ACCO-04, ACCO-05, ACCO-06

Custom Blöcke bearbeiten:

Vorlage:

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


Inhalt von {ACCORDION}:

accordion

[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>


Artikel Übersicht


Anlegen der HTML-CPs

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>


Bsp. eines CPs im Accordion Tab 01:

Hier Text mit Bild:


Accordion Source:

CSS:

Datei: template/inc_css/specific/mootools/cust_block_accordion01.css

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


JavaScript:

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


deutsch/phpwcms-system/admin/vorlagen/custom_blocks/accordion-mootools-beispiel.1274098668.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0