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); }); |
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.
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.. ;)
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
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
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
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
Hi Alex,
du solltest Firebug bzw. vergleichbare Browsertools einsetzen. Dann hättest du den JavaScript-Fehler
$(...).find(...).accordion is not a functiongesehen :)
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
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
Hi,
bin gerade dabei, das Accordion wie oben beschrieben, einzubinden. Flexform und GridLayout habe ich eingebunden und das funktioniert m.E. auch. Im Frontend erhalte ich über der ersten Überschrift aber eine Zeile mit den Optionen. Dort steht
{„active“:0,“header“:““,“collapsible“:true,“heightStyle“:“auto“,“event“:“click“}
Wenn ich in den Source-Code schaue, dann ist die Struktur wie folgt
{„active“:0,“header“:““,“collapsible“:true,“heightStyle“:“auto“,“event“:“click“}
Ok, dann dachte ich, dass vielleicht das JavaScript nicht richtig eingebunden ist.
Dafür habe ich bislang aber nur die Möglichkeit gefunden, in der Datei page.typoscript mittels
page.headerData {
10 = TEXT
10.value (
…
)
}
das JavaScript eingebunden. Mmmh, also im SourceCode der Seite wird das im Headerbereich auch so ausgegeben, nur leider startet das Accordeon nicht. Eine Idee für mich?