Sie befinden sich hier: Technik / jQuery / Dynamisches Layout mit YAML-Template
Deutsch
English
Mittwoch, 26.09.2018
Anmelden

Mit etwas jQuery-Code kann man die Spalten #col1 und #col2 des YAML-Frameworks dynamisch ausblenden. Der Vorteil dieser Vorgehensweise: man kann für einzelne Seiten bzw. einen Seitenbaum mit Hilfe eines Erweiterungs-Templates in TYPO3 einzelne Spalten ausblenden, ohne ein neues YAML-HTML-Template für diese Seiten einbinden zu müssen.

Im Erweiterungs-Template muss nur folgender Typoscript-Code eingefügt werden:

page.headerData.55 = TEXT
page.headerData.55.value (
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('body').removeAttr('class').addClass('hidecol2');
        });
    </script>
)

Als Klassen können hidecol1, hidecol2 und hideboth gewählt werden. Die Klasse wird dann jeweils dem body-Tag hinzugefügt. Zuvor wird das class-Element für das body-Tag entfernt.

Wichtig! In die main-css-Datei des YAML-Templates muss noch mit folgendem include-Befehl eine css-Datei mit den definierten Klassen .hidecol1, .hidecol2 und .hideboth inkludiert werden.

@import url(screen/basemod_dynamic_layout_switching.css);

Die basemod_dynamic_layout_switching.css muss noch mit folgendem Inhalt angelegt werden:

/**
 * @section generic classes for layout switching
 * @see     ...
 *
 * .hidecol1 -> 2-column-layout (using #col2 and #col3)
 * .hidecol2 -> 2-column-layout (using #col1 and #col3)
 * .hideboth -> single-column-layout (using #col3)
 */

.hideboth #col3 { margin-left: 0; margin-right: 0; }
.hideboth #col3_content{ padding-left: 20px; padding-right: 20px; }

.hidecol1 #col3 { margin-left: 0; margin-right: 25%; }
.hidecol1 #col3_content{ padding-left: 20px; }

.hidecol2 #col3 { margin-left: 25%; margin-right: 0; }
.hidecol2 #col3_content{ padding-right: 20px; }

.hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }

 

Verwendung mit jQuery-Plugin-Extensions

Eine Besonderheit gibt es, wenn auf der Seite, die auf diese Weise manipuliert werden soll, bereits ein Plugin installiert ist, welches auf die jQuery-Bibliothek mit einer jQuery(document).ready(function(){}) zugreift, dann muss das von dieser eingefügte Javascript um die Zeile jQuery('body').addClass('hidecol2'); erweitert werden. Die jQuery(document).ready(function(){}) darf nur einmal aufgerufen werden. Wenn sie mehrfach aufgerufen wird, dann wird nur der letzte Aufruf ausgeführt.

Dies ist z.B. bei jfmulticontent der Fall. Dort muss man die javascript-Datei EXT:jfmulticontent/res/tx_jfmulticontent_pi1.js kopiert werden (am besten in ein Template-Verzeichnis, z.B. fileadmin/template/jfmulticontent). Für jede col-Manipulation muss eine entsprechende javascript-Datei mit der zusätzlichen Zeile erstellt werden, z.B. tx_jfmulticontent_pi1-hidecol2.js etc.

Für die TAB-Anzeige von jfmulticontent würde die Änderung in dieser Datei dann so aussehen:

<!-- ###TEMPLATE_TAB_JS### begin -->
jQuery(document).ready(function(){
        <!-- ###FIX_HREF### -->
        jQuery('####KEY### ul li a').each(function(id, item){
                var temp = item.href.split('#');
                var temp_last = temp[temp.length-1];
                var search = /^###PREG_QUOTE_KEY###/;
                if (search.test(temp[temp.length-1])){
                        item.href = '#'+temp_last;
                }
        });
        <!-- ###FIX_HREF### -->
        jQuery('####KEY###').tabs({
                ###OPTIONS###
        })###ROTATE###;

        jQuery('body').addClass('hidecol2');
});
<!-- ###TEMPLATE_TAB_JS### end -->

Die Änderungen müssen natürlich auch für die anderen jfmulticontent-Funktionen erfolgen.

Jetzt kann auf der Seite, deren col-Darstellung manipuliert werden soll, die folgende Konstante gesetzt werden:

plugin.tx_jfmulticontent_pi1.file.templateFileJS = fileadmin/template/jfmulticontent/tx_jfmulticontent_pi1-hidecol2.js

Hiermit wird die entsprechend manipulierte Javascript-Datei eingebunden.