I spent some time implementing the old tabbing feature that Plone 4 provides with a jQuery plugin (see https://github.com/plone/Products.CMFPlone/blob/4.3.x/Products/CMFPlone/skins/plone_ecmascript/form_tabbing.js).
I was sure this was still present on Plone 5, so I looked for a mockup pattern.
First issue: there's something strange in the documentation as Tabs is only visible under the TOC pattern documentation - http://plone.github.io/mockup/dev/#pattern/autotoc
Documentation apart I was happy to see that the new pattern do not force you to use DL/DT/DD or other static DOM structures, but this is not working properly.
My need was to implement tabs outside a form, so just present some DIVs rendered as separate tabs.
Looking at the documentation it seems you can provide any DOM structure you want so I tested that one:
<div class="pat-autotoc autotabs" data-pat-autotoc="section:section;levels:h2;">
<section>
<h2>Title A</h2>
<p>Lorem</p>
</section>
<section>
<h2>Title B</h2>
<p>Ipsum</p>
</section>
</div>
It's partially working. Tabs are rendered and working but the H2 is repeated again inside the tab's content.
I tested some other DOM structure but nothing really change. The only way I have to have this really working is to go back to fieldset/legend:
<div class="pat-autotoc autotabs" data-pat-autotoc="section:fieldset;levels:legend;">
<fieldset>
<legend>Title A</legend>
<p>Lorem</p>
</fieldset>
<fieldset>
<legend>Title B</legend>
<p>Ipsum</p>
</fieldset>
</div>
That is rendered as...
...but I have fieldset/legend outside a form, and I don't like this really much.
To recap:
- mockup documentation for this pattern is someway hidden.
- in facts this pattern seems related to the TOC feature someway (note the class "pat-autotoc" that is required) but I don't really see why. Tabbing and toc are two totally different topics.
- although the pattern seems to support a free DOM structure, only fieldset/legend is really working.
Anybody had different experience with this pattern?