TYPO3: Accordion mit gridelements

In Ergänzung zum Artikel Slider mit gridelements hier nun die Konfiguration zum Accordion mit der Ext. gridelements:

Die FlexForm-Konfiguration für die Accordion-Optionen. Ich setze das Accordion von jqueryui ein, daher stehen hier die Optionen für dieses jQuery Plugin:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Allgemein</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el type="array">
                    <active type="array">
                        <TCEforms type="array">
                            <label>Geöffnetes Element (0 = erstes, 1 = zweites, ..., -1 = letztes)</label>
                            <config type="array">
                                <type>input</type>
                                <size>1</size>
                                <max>3</max>
                            </config>
                        </TCEforms>
                    </active>
                </el>
            </ROOT>
        </sDEF>
        <advanced>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Erweitert</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el type="array">
                    <header type="array">
                        <TCEforms type="array">
                            <label>Überschrift Tag</label>
                            <config type="array">
                                <type>input</type>
                                <size>2</size>
                                <default>h3</default>
                            </config>
                        </TCEforms>
                    </header>
                    <collapsible type="array">
                        <TCEforms type="array">
                            <label>Alle Elemente sind einklappbar</label>
                            <config type="array">
                                <type>check</type>
                                <default>1</default>
                            </config>
                        </TCEforms>
                    </collapsible>
                    <animate type="array">
                        <TCEforms type="array">
                            <label>Animation (Name des Effektes oder Dauer in Millisekunden)</label>
                            <config type="array">
                                <type>input</type>
                                <size>40</size>
                            </config>
                        </TCEforms>
                    </animate>
                    <heightStyle type="array">
                        <TCEforms type="array">
                            <label>Verhalten Höhe</label>
                            <config type="array">
                                <type>select</type>
                                <items type="array">
                                <numIndex index="0" type="array">
                                    <numIndex index="0">Keine Anpassung</numIndex>
                                    <numIndex index="1">content</numIndex>
                                </numIndex>
                                <numIndex index="1" type="array">
                                    <numIndex index="0">Orientierung an höchsten Element</numIndex>
                                    <numIndex index="1">auto</numIndex>
                                </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </heightStyle>
                    <event type="array">
                        <TCEforms type="array">
                            <label>Aufklappen bei</label>
                            <config type="array">
                                <type>select</type>
                                <items type="array">
                                <numIndex index="0" type="array">
                                    <numIndex index="0">Klick</numIndex>
                                    <numIndex index="1">click</numIndex>
                                </numIndex>
                                <numIndex index="1" type="array">
                                    <numIndex index="0">Mouseover</numIndex>
                                    <numIndex index="1">mouseover</numIndex>
                                </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </event>
                </el>
            </ROOT>
        </advanced>
    </sheets>
</T3DataStructure>

HTML-Ausgabe dieses Raster-Elementes:

TS Setup

tt_content.gridelements_pi1 {
    20.10.setup {
        13 < lib.gridelements.defaultGridSetup
        13 {
            columns {
                default.renderObj.wrap = <li class="accordionItem">|</li>
            }
            wrap.stdWrap.cObject = COA
            wrap.stdWrap.cObject {
                wrap = <div class="accordion">|</div>
                10 = COA
                10 {
                    10 = COA
                    10 {
                        wrap = <div class="options">{|}</div>
                        110 = TEXT
                        110.value = "active":false,
                        110.override.wrap = "active":|,
                        110.override.field = flexform_active
                        110.override.if.value = -2
                        110.override.if.isGreaterThan.field = flexform_active
                        120 = TEXT
                        120.wrap = "header":"|",
                        120.field = flexform_header
                        130 = TEXT
                        130.value = "collapsible":true,
                        130.if.isTrue.field = flexform_collapsible
                        140 = TEXT
                        140.wrap = "animate":|,
                        140.field = flexform_animate
                        140.required = 1
                        140.override.wrap = "|"
                        140.override.field = flexform_animate
                        140.override.if.value = 1000000
                        140.override.if.isGreaterThan.field = flexform_animate
                        150 = TEXT
                        150.wrap = "heightStyle":"|",
                        150.field = flexform_heightStyle
                        160 = TEXT
                        160.wrap = "event":"|"
                        160.field = flexform_event
                    }
                    20 = TEXT
                    20.value = <ul class="accordionContents">|</ul>
                }
            }
        }
    }
}

Der JavaScript-Code, um die Optionen an den Slider weiterzugeben:

$('.accordion').each(function(){
    options = $(this).find('.options').text();
    if(options) {
        options = $.parseJSON(options);
    } else {
        options = [];
    }
    $(this).find('.accordionContents').accordion(options);
});

Autor:
Geändert: Sonntag, 2. März 2014 10:05 Uhr
Erstellt: Montag, 9. Dezember 2013 8:50 Uhr
Tags: , , , , ,
Themengebiet: Web Entwicklung, TYPO3

Trackback: Trackback-URL LoadingZu Favoriten hinzufügen

9 Kommentare

  1. 1

    Hi,
    Thanks for providing information about Typo3 accordion with grid elements. . I think this information will make a great helps company to provide Typo3 Development to customer.

  2. 2

    Ich habe das scheinbar schon richtig eingepflegt, allerdings schafft das FE kein Akkordion(die zwei Elemente sind unter dem Slider):

    http://typo362.deutschenbaur.eu/index.php?id=2

    natürlich versuche ich die beiden javaScripts in einer Datei auszugeben – im Quelltext ende in der custom.js

    Ich denke, es ist doch alles richtig?

    gruß und danke für eine tollen tuts.. ;)

  3. 3

    Hi Alex,
    für das Accordion kann ich auf deiner Webseite keinen JavaScript Code finden. Außerdem bindest du die jQuery Library zweimal ein, das könnte auch zu Problemen führen.
    Gruß Sven

  4. 4

    Hi,

    ich habs wieder rausgenommen. sorry. Aber funktioniert das bei dir denn so wie oben beschrieben?

    Ich habe momentan das tinyaccordion – allerdings als extension – eingebunden. Allerdings möchte ich das schon noch mit AnythingSlider machen, wenn ich den eh schon eingebunden habe..

    2 Jquery sollten jetzt auch wieder weg sein…

    schönen Gruß – alex

  5. 5

    Hi Alex,
    schau dir mal den Quellcode und JavaScript an. Ich kann z.B. nicht sehen, dass es auf der Seite irgendwelche Inhalte gibt, die mit Klasse „accordion“ oder ähnlich versehen sind – das JavaScript für die Accordion-Funktion findet also gar keine Inhalte, die es als Accordion behandeln könnte.
    Ich glaube auch nicht, dass AnythingSlider Accordions erzeugen kann.
    Gruß Sven

  6. 6

    Hi,

    also hier nochmals ein Beispiel. Jetzt ist alles eingebunden. Leider funktionierts nicht..

    http://typo362.deutschenbaur.eu/index.php?id=45

    ich kriegs nicht hin, sh…#

    gruß – alex

  7. 7

    Hi Alex,
    du solltest Firebug bzw. vergleichbare Browsertools einsetzen. Dann hättest du den JavaScript-Fehler
    $(...).find(...).accordion is not a function
    gesehen :)

  8. 8

    Hallo Sven, und danke für den guten Post. Habe das Ganze mir mal angeschaut und nun auch im Einsatz. Ist wirklich die eleganteste Lösung, wenn man noch alle unterschiedlichen Inhaltselemente nutzen will.

    Das Options-Div sollte man gleich auch noch mit style=“display:none“; versehen, so dass es nicht kurz aufflackert, wenn die Seite geladen wird.

    Des Weiteren lohnt es sich m.E. auch, mit fontawesome o.ä. zu arbeiten und so die Config noch für die Icons reinzunehmen. Z.B.:

    170 = COA
    170 {
    wrap = „icons“: {|}
    10 = TEXT
    10 {
    value = „fa fa-plus-square“
    wrap = „header“:|,
    }
    20 = TEXT
    20 {
    value = „fa fa-minus-square“
    wrap = „activeHeader“:|
    }
    }

    Viele Grüße, Björn

  9. 9

    Hallo Björn,
    klar, das Options-Div sollte versteckt werden, allerdings nicht unbedingt per Inline-CSS, sondern besser in einer ausgelagerten CSS Datei.
    Gute Idee, der Einsatz von fontawesome. Allerdings haben meine Kunden oft genaue Vorstellungen davon, wie die Icons aussehen sollen und schicken mir ihre eigenen. Außerdem ist die Schriftdatei von fontawesome 50 bis 110 kb groß.
    Viele Grüße
    Sven

Kommentar abgeben