> [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Martin > Gesendet: Mittwoch, 6. März 2013 07:34 > > Hallo, > > sollte dieser Beitrag nicht in diesen Forenbereich passen, > dann bitte ich dies zu entschuldigen. > > Ich möchte ein Toggle FCE mit der Extension Gridelements erstellen. > > Dazu habe ich folgenden Beispielcode: > > ...
So "umständlich" musst du das gar nicht machen... > ... > > So sollte es in etwa aussehen. > Hier ein Beispiel das ich erst vor wenigen Tagen gemacht habe: http://www.khp-yachtcharter.com/service/dies-und-das/coole-drinks.html#c1013 > ABER: Wie kann ich die Flexform Konfig so ändern, dass ich > beliebig viele Toggle Elemente haben kann, mit nen Plus > Zeichen oder so. > > Und wie verbinde ich eine fertige Konfiguration mit dem oben > genannten Beispiel Quellcode der Frontendausgabe? Die Zutaten sind: gridelemenets, Typoscript, jQuery 1. Im BE ein ganz einfaches FCE (Backend CE) anlegen, z.B.: backend_layout { colCount = 1 rowCount = 1 rows { 1 { columns { 1 { name = Accordion Element colPos = 10 allowed = CE's } } } } } 2. BE Layout konfigurieren # ID 8: FCE - Accordion Container tt_content.gridelements_pi1.20.10.setup { 8 < temp.gridelements.defaultGridSetup 8 { columns { # colPos ID = 10 - Accordion Inhalt 10 < .default 10.wrap = <div class="accordion">|</div> } } } "8" musst du natürlich durch deine ID anpassen und auch ggf. die ID der colPos Damit kannst du dann im Backend ein Rasterlement anlegen, welches den Container für alle Accordion- bzw. Toggle-Inhalte bildet. Innerhalb des Accordion-containers kannst du jetzt beliebig deine CEs einfügen, so z.B. ein Text/Bild-Element. Jedes CE repräsentiert ein Accordion-/Toggle-Element. 3. Javascript $(document).ready(function(){ $( ".accordion" ).accordion( {header: "header", heightStyle: "content"} ); }); ".accordion" musst du natürlich anpassen wenn deine Klasse z.B. ".toggle" heißt. Mit "header" gibst du das Tag an, das den Accoridon-/Toggle-Titel darstellt. Kann also z.B. auch H2 oder H3 sein, hängt von der gerenderten Seitenausgabe ab. In meinem Fall war diese HTML5, deshalb auch das Tag "header". Eine Doku des jQuery Accordion Widgets findest du hier: http://api.jqueryui.com/accordion/ 4. jQuery Lib und jQuery Accordion Widget Jetzt musst du nur noch jQuery einbinden (am besten mit der Ext. t3jquery) und auch noch die jQuery UI Styles: http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css Du kannst jQuery natürlich auch "von Hand" einbinden, dann brauchst du noch: http://code.jquery.com/jquery-1.9.1.js http://code.jquery.com/ui/1.10.1/jquery-ui.js Das wars dann auch schon. Viel Erfolg! Grüße, Johannes. _______________________________________________ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
