[TYPO3-german] Toggle Inhaltselement mit Gridelements (& FlexForm Konfig)
Kay Strobach
typo3 at kay-strobach.de
Wed Mar 6 07:54:13 CET 2013
Hi Martin,
ob das mit gridelements geht weiß ich nicht, denke aber schon. Als
kurzfristige Lösung kannst du dir ja mal fluidcontent und
fluidcontent_bootstap ansehen. Dort gibt es ein row element, dass genau
das abbildet :D
Grüße
Kay
Am 06.03.13 07:34, schrieb Martin:
> 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:
>
> [CODE]<div class="toggles">
> <ul>
> <li>
> <a href="#" data-rel="toggle[first]"
> data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
> <img src="./images/plus.png" alt=""><h5>Duis
> autem vel eum iriure</h5></a>
> <div id="first">
> <p>Lorem ipsum dolor sit amet, consectetueruer
> adipiscing elit, sed diam nonummy
> nibhhhitest euismod tincidunt ut laoreet dolore
> magnamus aliquam erat volutpat.
> Ut wisi enim ad minim veniam, quis nostrud exerci
> tation ullamcorper suscipit lobortis
> nisl ut aliquip ex ea commodo consequat. Duis
> autem vel eum iriure dolor in hendrerit
> in vulputate velit esse molestie consequat, vel
> illum dolore eu feugiat nulla facilisis
> at vero</p>
> </div>
> </li>
> <li>
> <a href="#" data-rel="toggle[second]"
> data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
> <img src="./images/plus.png" alt=""><h4>Vel illum
> dolore eu feugiat</h4></a>
> <div id="second">
> <p>Lorem ipsum dolor sit amet, consectetueruer
> adipiscing elit, sed diam nonummy
> nibhhhitest euismod tincidunt ut laoreet dolore
> magnamus aliquam erat volutpat.
> Ut wisi enim ad minim veniam, quis nostrud
> exerci tation ullamcorper suscipit
> lobortis nisl ut aliquip ex ea commodo
> consequat. Duis autem vel eum iriure dolor
> in hendrerit in vulputate velit esse molestie
> consequat, vel illum dolore eu feugiat
> nulla facilisis at vero</p>
> </div>
> </li>
> <li>
> <a href="#" data-rel="toggle[third]"
> data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
> <img src="./images/plus.png" alt=""><h4>Euismod
> tincidunt ut laoreet</h4></a>
> <div id="third">
> <p>
> Rabbits are ground dwellers that live in
> environments ranging from desert
> to tropical forest and wetland. Their natural
> geographic range encompasses the
> middle latitudes of the Western Hemisphere. In
> the Eastern
> Hemisphere rabbits are found in Europe,
> portions of Central and Southern Africa, the
> Indian subcontinent, Sumatra, and Japan.</p>
> </div>
> </li>
> </ul>
> </div>[/CODE]
>
> Ich habe im BE ein CE Gridelement mit einer Spalte erstellt:
>
> [CODE]backend_layout {
> colCount = 1
> rowCount = 1
> rows {
> 1 {
> columns {
> 1 {
> name = Toggle-Inhalt
> colPos = 1
> }
> }
> }
> }
> }[/CODE]
>
> Nun möchte ich den Rest der Konfiguration mit einer FlexForm
> Konfiguration vornehmen. Ich habe mir mal als Beispiel eine von mir mit
> damals TemplaVoila erstellten Variante mal in die FlexForm Konfig des
> Gridelements CE eingegeben:
>
> [CODE]<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
> <T3DataStructure>
> <meta type="array">
> <langDisable>1</langDisable>
> </meta>
> <ROOT type="array">
> <tx_templavoila type="array">
> <title>ROOT</title>
> <description>Wählen Sie das HTML-Element der Seite, das Sie
> als übergeordnetes Container-Element der Vorlage möchten.</description>
> </tx_templavoila>
> <type>array</type>
> <el type="array">
> <field_title type="array">
> <tx_templavoila type="array">
> <title>Title</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>input</eType>
> <proc type="array">
> <HSC type="integer">1</HSC>
> <stdWrap></stdWrap>
> </proc>
> <preview></preview>
> <TypoScript type="NULL"></TypoScript>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Title</label>
> <config type="array">
> <type>input</type>
> <size>48</size>
> <eval>trim</eval>
> </config>
> </TCEforms>
> </field_title>
> <field_inhalt type="array">
> <tx_templavoila type="array">
> <title>Inhalt</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>ce</eType>
> <TypoScript>
> 10= RECORDS
> 10.source.current=1
> 10.tables = tt_content</TypoScript>
> <preview></preview>
> <enableDragDrop type="integer">1</enableDragDrop>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Inhalt</label>
> <config type="array">
> <type>group</type>
> <internal_type>db</internal_type>
> <allowed>tt_content</allowed>
> <size>5</size>
> <maxitems>200</maxitems>
> <minitems>0</minitems>
> <multiple>1</multiple>
> <show_thumbs>1</show_thumbs>
> </config>
> </TCEforms>
> </field_inhalt>
> <field_title1 type="array">
> <tx_templavoila type="array">
> <title>Title1</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>input</eType>
> <proc type="array">
> <HSC type="integer">1</HSC>
> <stdWrap></stdWrap>
> </proc>
> <preview></preview>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Title1</label>
> <config type="array">
> <type>input</type>
> <size>48</size>
> <eval>trim</eval>
> </config>
> </TCEforms>
> </field_title1>
> <field_inhalt1 type="array">
> <tx_templavoila type="array">
> <title>Inhalt1</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>ce</eType>
> <TypoScript>
> 10= RECORDS
> 10.source.current=1
> 10.tables = tt_content</TypoScript>
> <preview></preview>
> <enableDragDrop type="integer">1</enableDragDrop>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Inhalt1</label>
> <config type="array">
> <type>group</type>
> <internal_type>db</internal_type>
> <allowed>tt_content</allowed>
> <size>5</size>
> <maxitems>200</maxitems>
> <minitems>0</minitems>
> <multiple>1</multiple>
> <show_thumbs>1</show_thumbs>
> </config>
> </TCEforms>
> </field_inhalt1>
> <field_title2 type="array">
> <tx_templavoila type="array">
> <title>Title2</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>input</eType>
> <proc type="array">
> <HSC type="integer">1</HSC>
> <stdWrap></stdWrap>
> </proc>
> <preview></preview>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Title2</label>
> <config type="array">
> <type>input</type>
> <size>48</size>
> <eval>trim</eval>
> </config>
> </TCEforms>
> </field_title2>
> <field_inhalt2 type="array">
> <tx_templavoila type="array">
> <title>Inhalt2</title>
> <sample_data type="array">
> <numIndex index="0"></numIndex>
> </sample_data>
> <eType>ce</eType>
> <TypoScript>
> 10= RECORDS
> 10.source.current=1
> 10.tables = tt_content</TypoScript>
> <preview></preview>
> <enableDragDrop type="integer">1</enableDragDrop>
> </tx_templavoila>
> <TCEforms type="array">
> <label>Inhalt2</label>
> <config type="array">
> <type>group</type>
> <internal_type>db</internal_type>
> <allowed>tt_content</allowed>
> <size>5</size>
> <maxitems>200</maxitems>
> <minitems>0</minitems>
> <multiple>1</multiple>
> <show_thumbs>1</show_thumbs>
> </config>
> </TCEforms>
> </field_inhalt2>
> </el>
> </ROOT>
> </T3DataStructure>[/CODE]
>
> Im BE wird dies nun eigentlich einwandfrei dargestellt. Zuerst kommt die
> Eingabe des Titels und das Feld für die Inhaltselemente.
>
> So sollte es in etwa aussehen.
>
> 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?
--
http://www.kay-strobach.de - Open Source Rocks
TYPO3 .... inspiring people to share!
Get involved: http://typo3.org
Answer was useful - feel free to donate:
-
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KPM9NAV73VDF2
- https://flattr.com/profile/kaystrobach
More information about the TYPO3-german
mailing list