Tabbed interface

Features

• Multiple tabs on the same page.
• Multiple design options.
• Choose the default tab (<li class="default">).
• Choose if the tabs cycle and choose the cycle speed (fast: class="cycle-fast", slow: class="cycle-slow", normal: class="cycle").
• Injects Pause/Play if cycle is activated. Appropriate French is injected for French pages.
• Pause/Play alone would have accessibility issues as it not being descriptive enough ("Pause" what?), so the injected code actually says: Pause <span class="wb-invisible">: Stop tab rotation</span> and Play <span class="wb-invisible">: Start tab rotation</span>
• Force tabs to be the same height, i.e. they will all be the height of the tallest tab. This is useful if there is a cycle effect, so the page doesn't jump as the tab cycles from one panel to the next.

Coding

<div class="wet-boew-tabbedinterface tabs-style-2">
	<ul class="tabs">
		<li><a href="#tabs1_1">Tab 1</a></li>
		<li class="default"><a href="#tabs1_2">Tab 2</a></li>
		<li><a href="#tabs1_3">Tab3</a></li>
	</ul>
	<div class="tabs-panel">
		<div id="tabs1_1">
			...
		</div>
		<div id="tabs1_2">
			...
		</div>
		<div id="tabs1_3">
			...
		</div>
	</div>
</div>

CSS names

This plug-in uses the following CSS names:

• wet-boew-tabbedinterface
• tabs
• tabs-panel
• tabs-style-1
• tabs-style-2
• tabs-style-3
• tabs-style-4
• tabs-style-5
• tabs-content-pad
• clear
• wb-invisible
• default
• cycle-fast
• cycle-slow
• cycle
• auto-play
• auto-height-none
• animate-fast
• animate-slow
• animate
• slide-horz
• slide-vert