[TYPO3-mvc] Tab widget

[Franz Koch]

On 15.01.2010 15:23, Martin Kutschker wrote:
> 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?

I can only speak for jQuery, and I already do it this way with a custom 
tab script that's no big deal at all

> 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.

Actually you don't have to hide the ul, as it's simply acting as a 
section index if JS is turned of - so it doesn't harm in any way. Of 
course you can hide it via CSS. The widget should add a custom CSS class 
to the navigation/containers anyway once activated, so you don't need to 
add a inline CSS to hide it by default. A overall wrapper around the 
whole block does of course make sense.

> <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>

I'd say the div-nesting around the tab contents is something that the JS 
should take care of and doesn't necessarily have to be part of the 
default HTML output - although they don't hurt. Some say that you should 
try to avoid unnecessary nesting of your HTML source - and for the 
regular HTML version it might not be needed. But I could live with the tags.

> 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.

sure - the Hx level is not important. You might not even need any 
headlines. In my example I created by hand a ID inside my h2 tag - which 
could have been any other tag as well.


> 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.

I don't think that's working, because the f:widget.tabs viewHelper might 
only expect f:widget.tab children and not any other child type - so 
nesting inside a for-viewHelper will not work I think. I already thought 
about that before I wrote my suggestion.

-- 
kind regards,
Franz Koch