Ok, let´s go --> If you want to have a output like this:
Code: Select all
__________ __________ __________
( tab 1 ) ( tab 2 ) ( tab n )
_____________________________________________________
register content here
_____________________________________________________- We must have a closer look to the output of this cp.
My example template at /template/inc_cntpart/tabs/:
Code: Select all
<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="myTabs{ID}" class="tabs">{TABS_ENTRIES}</div>
[/TABS_ENTRIES]
<!--TABS_END//-->
<!--TABS_ENTRY_START//-->
<ul><li><h2>{TABTITLE}</h2>
<ul><li>[TABCONTENT]
[TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]<br />
[TABTEXT]{TABTEXT}[/TABTEXT]
[/TABCONTENT]
</li></ul>
</li></ul>
<!--TABS_ENTRY_END//-->Code: Select all
<h3>CP Register Tabs</h3>
<h4>MooTabs development</h4>
<div id="myTabs19" class="tabs"> <!-- e.g. 19 is the ID of this CP //-->
<ul><li>Tab 1 Label
<ul><li>
<h3>Title01</h3><br />
Tab 1 Content
</li></ul>
</li></ul>
<ul><li>Tab 2 Label
<ul><li>
<h3>Title02</h3><br />
Tab 1 Content
</li></ul>
</li></ul>
<ul><li>Tab 2 Label
<ul><li>
<h3>Title03</h3><br />
Tab 1 Content
</li></ul>
</li></ul>
</div>
Code: Select all
<div id="myTabs19">
<ul>
<li title="Tab1">Tab 1 Label</li>
<li title="Tab2">Tab 2 Label</li>
<li title="Tab3">Tab 3 Label</li>
</ul>
<div id="Tab1">
Tab 1 Content
</div>
<div id="Tab2">
Tab 2 Content
</div>
<div id="Tab3">
Tab 3 Content
</div>
</div>
All the "tab" snippets I have found are following this scheme.
There is only one programmer who had solved this problem, but there are no examples. (German)
We can solve this using a php script before the site is deliver by the system, but that isn´t the best solution.
I think we need an XHTML semanticaly correct output and logical order for Screanreaders.
In this context an JS solution by runtime is the better one.
Knut
