[TYPO3-german] gelöst: Tabs mit Gridelements

[Philipp Holdener]

Habs mit einem DCE gelöst... ganz einfach


{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="None" />

<f:section name="main">
	<div class="tabs-area">
		<ul class="tabset">
			<f:for each="{field.tab}" as="tab" iteration="iter">
				<f:if condition="{iter.isFirst}">
					<f:then>
						<li class="active"><a href="#tab{iter.index}">{tab.titel}</a></li>
					</f:then>
					<f:else>
						<li><a href="#tab{iter.index}">{tab.titel}</a></li>
					</f:else>
				</f:if>
			</f:for>
		</ul>
		<div class="tab-content">
			<f:for each="{field.tab}" as="tab" iteration="iter">
				<div id="tab{iter.index}">
					<f:format.html>{tab.text}</f:format.html>
				</div>
			</f:for>
		</div>
	</div>
</f:section>







> hallo zusammen
>
> Ich hab hier ein Tutorial zu einem Tabset mittels Gridelements gefunden.
>
> http://www.kupix.de/typo3-snippets-ext/t3-jquery-tabs.html
>
>
> Leider verstehe ich den Code nicht ganz.
>
>
> Ich bräuchte folgendes:
>
>
> <div class="tabs-area">
>                                  <ul class="tabset">
>                                      <li class="active"><a
> href="#tab1">tab 1</a></li>
>                                      <li><a href="#tab2">zweiter
> tab</a></li>
>                                      <li><a
> href="#tab3">tabnummer3</a></li>
>                                  </ul>
>                                  <div class="tab-content">
>                                      <div id="tab1">
>                                          <p>Mtur sandit qui quiatecatio
> vit esseque qui ut fugit quibearum que veribea sam eossundae dit ea
> doluptiossed uta dit dolMtur sandit qui quiatecatio vit esseque qui ut
> fugit quibearum que veribea sam eossundae dit ea doluptiossed uta dit
> doloraeMtur sandit qui quiatecatio vit esseque qui ut fugit quibearum
> que veribea sam eossundae dit ea doluptiossed uta dit doloraeMtur sandit
> qui quiatecatio vit esseque qui ut fugit quibearum que veribea sam
> eossundae dit ea doluptiossed uta dit doloraeorae.</p>
>                                      </div>
>                                      <div id="tab2">
>                                          <p>Tab 2 Mtur sandit qui
> quiatecatio vit esseque qui ut fugit quibearum que veribea sam eossundae
> dit ea doluptiossed uta dit dolMtur sandit qui quiatecatio vit esseque
> qui ut fugit quibearum que veribea sam eossundae dit ea doluptiossed uta
> dit doloraeMtur sandit qui quiatecatio vit esseque qui ut fugit
> quibearum que veribea sam eossundae dit ea doluptiossed uta dit
> doloraeMtur sandit qui quiatecatio vit esseque qui ut fugit quibearum
> que veribea sam eossundae dit ea doluptiossed uta dit doloraeorae.</p>
>                                      </div>
>                                      <div id="tab3">
>                                          <p>Tab 3 Mtur sandit qui
> quiatecatio vit esseque qui ut fugit quibearum que veribea sam eossundae
> dit ea doluptiossed uta dit dolMtur sandit qui quiatecatio vit esseque
> qui ut fugit quibearum que veribea sam eossundae dit ea doluptiossed uta
> dit doloraeMtur sandit qui quiatecatio vit esseque qui ut fugit
> quibearum que veribea sam eossundae dit ea doluptiossed uta dit
> doloraeMtur sandit qui quiatecatio vit esseque qui ut fugit quibearum
> que veribea sam eossundae dit ea doluptiossed uta dit doloraeorae.</p>
>                                      </div>
>                                  </div>
>                              </div>
>
>
>
>
>
> Das geht eigentlich.... bis auf dem Wrap der Inhalte (<div id="tab1">,
> <div id="tab2">, <div id="tab3"> etc)
>
> Hat mir jemand einen Tipp?
>
>
> Ich bräuchte ja was wie das hier:
>
> renderObj.dataWrap = <li><a href="#tab{field:uid}"
> title="TAB-Link">{field:header}</a></li>
>
>
>
> Beste Grüsse
> Philipp
>
>
>