[TYPO3-mvc] Tab widget

[Martin Kutschker]

Franz Koch schrieb:
> 
> I'm a big fan of semantically correct HTML, so for me the resulting HTML
> for a unobtrusive implementation of tabs should look something like this:
> -------------------
> <ul class="tabNavigation">
>     <li #parameters#><a href="#idTabTarget1">Tabtitle</a></li>
>     <li #parameters#><a href="#idTabTarget2">Tabtitle</a></li>
> </ul>
> 
> <h2 id="idTabTarget1">Tab content headline</h2>
> <p>Tab content</p>
> 
> <h2 id="idTabTarget2">Tab content headline</h2>
> <p>Tab content</p>
> -------------------

How much hoops do you have to take to teach ExtJS/jQuery/... to turn such structure into a working
widget? Lately I have concentrated on ExtJS in the BE where I let ExtJS do all the work so I haven't
had any HTML for ExtJS to work on.

But say, isn't the UL optional for the real widget. That is it can be hidden by JS if the real tabs
are surrounded with a div.

<div class="tab">
<ul class="tabNavigation" style="display:none">
    <li #parameters#><a href="#idTabTarget1">Tabtitle</a></li>
    <li #parameters#><a href="#idTabTarget2">Tabtitle</a></li>
</ul>

<div id="idTabTarget1" class="tabItem">
   <h2>Tab content headline</h2>
   <p>Tab content</p>
<div>

<div id="idTabTarget2" class="tabItem">
   <h2>Tab content headline</h2>
   <p>Tab content</p>
<div>
</div>

And I note that the choice of H2 is arbitrary. Depending on the place within the HTML a H3, H4, ...
could be the correct nesting level of Hx.

> Question is, how this could also be generated configured by the widget?
> Also automatic looping over object arrays might be a request for a tab
> widget:
> 
> <f:widget.tabs each="{objects}" as="{object}" default="first"
> iterator="iterator">
>   <f.widget.tab label="Topic: {iterator.count}"
> target="objectTabTarget{object.uid}">
>     <h2 id="objectTabTarget{object.uid}">{object.title}</h2>
>     <f:format.html>{object.description</f:format>
>   </f:widget.tab>
> </f:widget.tabs>

Why don't you simply put the f:widget.tabs tag outside the loop? Then you can do the loop within the
f:widget.tabs tag. Looks like the f:widget.tabs should render its content inernally before looking
for any f:widget.tab children.

Masi