Toggle Inhaltselement mit Gridelements (& FlexForm Konfig)

  • jojoschmiddi jojoschmi...
    Padawan
    0 x
    57 Beiträge
    0 Hilfreiche Beiträge
    05. 03. 2013, 20:55

    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:

    1. <div class="toggles">
    2. <ul>
    3. <li>
    4. <a href="#" data-rel="toggle[first]" data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
    5. <img src="./images/plus.png" alt=""><h5>Duis autem vel eum iriure</h5></a>
    6. <div id="first">
    7. <p>Lorem ipsum dolor sit amet, consectetueruer adipiscing elit, sed diam nonummy
    8. nibhhhitest euismod tincidunt ut laoreet dolore magnamus aliquam erat volutpat.
    9. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    10. nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
    11. in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
    12. at vero</p>
    13. </div>
    14. </li>
    15. <li>
    16. <a href="#" data-rel="toggle[second]" data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
    17. <img src="./images/plus.png" alt=""><h4>Vel illum dolore eu feugiat</h4></a>
    18. <div id="second">
    19. <p>Lorem ipsum dolor sit amet, consectetueruer adipiscing elit, sed diam nonummy
    20. nibhhhitest euismod tincidunt ut laoreet dolore magnamus aliquam erat volutpat.
    21. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    22. lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
    23. in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    24. nulla facilisis at vero</p>
    25. </div>
    26. </li>
    27. <li>
    28. <a href="#" data-rel="toggle[third]" data-openimage="./images/minus.png" data-closedimage="./images/plus.png">
    29. <img src="./images/plus.png" alt=""><h4>Euismod tincidunt ut laoreet</h4></a>
    30. <div id="third">
    31. <p>
    32. Rabbits are ground dwellers that live in environments ranging from desert
    33. to tropical forest and wetland. Their natural geographic range encompasses the
    34. middle latitudes of the Western Hemisphere. In the Eastern
    35. Hemisphere rabbits are found in Europe,
    36. portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.</p>
    37. </div>
    38. </li>
    39. </ul>
    40. </div>

    Ich habe im BE ein CE Gridelement mit einer Spalte erstellt:

    1. backend_layout {
    2. colCount = 1
    3. rowCount = 1
    4. rows {
    5. 1 {
    6. columns {
    7. 1 {
    8. name = Toggle-Inhalt
    9. colPos = 1
    10. }
    11. }
    12. }
    13. }
    14. }

    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:

    1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
    2. <T3DataStructure>
    3. <meta type="array">
    4. <langDisable>1</langDisable>
    5. </meta>
    6. <ROOT type="array">
    7. <tx_templavoila type="array">
    8. <title>ROOT</title>
    9. <description>Wählen Sie das HTML-Element der Seite, das Sie als übergeordnetes Container-Element der Vorlage möchten.</description>
    10. </tx_templavoila>
    11. <type>array</type>
    12. <el type="array">
    13. <field_title type="array">
    14. <tx_templavoila type="array">
    15. <title>Title</title>
    16. <sample_data type="array">
    17. <numIndex index="0"></numIndex>
    18. </sample_data>
    19. <eType>input</eType>
    20. <proc type="array">
    21. <HSC type="integer">1</HSC>
    22. <stdWrap></stdWrap>
    23. </proc>
    24. <preview></preview>
    25. <TypoScript type="NULL"></TypoScript>
    26. </tx_templavoila>
    27. <TCEforms type="array">
    28. <label>Title</label>
    29. <config type="array">
    30. <type>input</type>
    31. <size>48</size>
    32. <eval>trim</eval>
    33. </config>
    34. </TCEforms>
    35. </field_title>
    36. <field_inhalt type="array">
    37. <tx_templavoila type="array">
    38. <title>Inhalt</title>
    39. <sample_data type="array">
    40. <numIndex index="0"></numIndex>
    41. </sample_data>
    42. <eType>ce</eType>
    43. <TypoScript>
    44. 10= RECORDS
    45. 10.source.current=1
    46. 10.tables = tt_content</TypoScript>
    47. <preview></preview>
    48. <enableDragDrop type="integer">1</enableDragDrop>
    49. </tx_templavoila>
    50. <TCEforms type="array">
    51. <label>Inhalt</label>
    52. <config type="array">
    53. <type>group</type>
    54. <internal_type>db</internal_type>
    55. <allowed>tt_content</allowed>
    56. <size>5</size>
    57. <maxitems>200</maxitems>
    58. <minitems>0</minitems>
    59. <multiple>1</multiple>
    60. <show_thumbs>1</show_thumbs>
    61. </config>
    62. </TCEforms>
    63. </field_inhalt>
    64. <field_title1 type="array">
    65. <tx_templavoila type="array">
    66. <title>Title1</title>
    67. <sample_data type="array">
    68. <numIndex index="0"></numIndex>
    69. </sample_data>
    70. <eType>input</eType>
    71. <proc type="array">
    72. <HSC type="integer">1</HSC>
    73. <stdWrap></stdWrap>
    74. </proc>
    75. <preview></preview>
    76. </tx_templavoila>
    77. <TCEforms type="array">
    78. <label>Title1</label>
    79. <config type="array">
    80. <type>input</type>
    81. <size>48</size>
    82. <eval>trim</eval>
    83. </config>
    84. </TCEforms>
    85. </field_title1>
    86. <field_inhalt1 type="array">
    87. <tx_templavoila type="array">
    88. <title>Inhalt1</title>
    89. <sample_data type="array">
    90. <numIndex index="0"></numIndex>
    91. </sample_data>
    92. <eType>ce</eType>
    93. <TypoScript>
    94. 10= RECORDS
    95. 10.source.current=1
    96. 10.tables = tt_content</TypoScript>
    97. <preview></preview>
    98. <enableDragDrop type="integer">1</enableDragDrop>
    99. </tx_templavoila>
    100. <TCEforms type="array">
    101. <label>Inhalt1</label>
    102. <config type="array">
    103. <type>group</type>
    104. <internal_type>db</internal_type>
    105. <allowed>tt_content</allowed>
    106. <size>5</size>
    107. <maxitems>200</maxitems>
    108. <minitems>0</minitems>
    109. <multiple>1</multiple>
    110. <show_thumbs>1</show_thumbs>
    111. </config>
    112. </TCEforms>
    113. </field_inhalt1>
    114. <field_title2 type="array">
    115. <tx_templavoila type="array">
    116. <title>Title2</title>
    117. <sample_data type="array">
    118. <numIndex index="0"></numIndex>
    119. </sample_data>
    120. <eType>input</eType>
    121. <proc type="array">
    122. <HSC type="integer">1</HSC>
    123. <stdWrap></stdWrap>
    124. </proc>
    125. <preview></preview>
    126. </tx_templavoila>
    127. <TCEforms type="array">
    128. <label>Title2</label>
    129. <config type="array">
    130. <type>input</type>
    131. <size>48</size>
    132. <eval>trim</eval>
    133. </config>
    134. </TCEforms>
    135. </field_title2>
    136. <field_inhalt2 type="array">
    137. <tx_templavoila type="array">
    138. <title>Inhalt2</title>
    139. <sample_data type="array">
    140. <numIndex index="0"></numIndex>
    141. </sample_data>
    142. <eType>ce</eType>
    143. <TypoScript>
    144. 10= RECORDS
    145. 10.source.current=1
    146. 10.tables = tt_content</TypoScript>
    147. <preview></preview>
    148. <enableDragDrop type="integer">1</enableDragDrop>
    149. </tx_templavoila>
    150. <TCEforms type="array">
    151. <label>Inhalt2</label>
    152. <config type="array">
    153. <type>group</type>
    154. <internal_type>db</internal_type>
    155. <allowed>tt_content</allowed>
    156. <size>5</size>
    157. <maxitems>200</maxitems>
    158. <minitems>0</minitems>
    159. <multiple>1</multiple>
    160. <show_thumbs>1</show_thumbs>
    161. </config>
    162. </TCEforms>
    163. </field_inhalt2>
    164. </el>
    165. </ROOT>
    166. </T3DataStructure>

    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?


  • 1
  • LuP LuP
    Jedi-Meister
    0 x
    496 Beiträge
    1 Hilfreiche Beiträge
    06. 03. 2013, 10:33

    Hallo,

    [quote="jojoschmiddi"]
    ABER: Wie kann ich die Flexform Konfig so ändern, dass ich beliebig viele Toggle Elemente haben kann, mit nen Plus Zeichen oder so.
    [/quote]
    warum nicht einfach über den "New record" Button, wie beim normalen CE auch?

    [quote="jojoschmiddi"]
    Und wie verbinde ich eine fertige Konfiguration mit dem oben genannten Beispiel Quellcode der Frontendausgabe?
    [/quote]
    [url="http://www.typo3.net/forum/beitraege/diverse_sonstige_module/111496/beitrag/seite/"][u][color=blue]Hier[/color][/u][/url] kannst Du nachlesen, was mischa zum Thema ausführlich erklärt hat.

    VG,
    LuP

  • 1