<img src="images/stories/demo/general/ext/roktabs.png" class="floatleft" alt="RokTabs" width="80" height="80"/>
<p><strong>RokTabs</strong> is a tabbed content module, standalone and themed. Content is transitioned, either by fade or scroll, powered by Mootools, which can be automatic or manual. Plugin support is also featured, whether loading module positions, read more content, or the K2 CCK component.</p>
<div class="clear"></div>
<h3 class="medmargintop">Module Features</h3>

<ul class="checkmark green normalfont">
    <li>Tabbed Content: Display multiple content items in a tabbed enclosure.</li>
    <li>Module Position Support: You can insert module positions inside the tabs.</li>
    <li>Inbuilt Styling: Both light and dark styling for standalone support</li>
    <li>Configurability: Highly configurable from options dealing with transition, to content type and layout.</li>
    <li>K2 Support: Fully compatible with the powerful content constructive component K2.</li>
</ul>

<p>
	<a href="http://www.rockettheme.com/extensions-joomla/roktabs" class="readon smallmarginright" target="_blank"><span>Details</span></a>
	<a href="http://www.rockettheme.com/extensions-downloads/club/1011-roktabs" class="readon smallmarginright" target="_blank"><span>Download</span></a>
	<a href="http://www.rockettheme.com/forum/index.php?f=207&amp;rb_v=viewforum" class="readon" target="_blank"><span>Support</span></a>
</p>

<h3>Module Configuration</h3>

<p>Options available at <strong>Admin &rarr; Extensions &rarr; Module Manager &rarr; <em>Roktabs Module</em></strong>. Important demo settings are highlighted accordingly:</p>

<h4>Other</h4>
<ul class="list-icon rightarrow">
	<li><strong>Theme Style:</strong> <em>Light</em> and <em>Dark</em>. Or <em>Custom</em>, if the template has styling for the modules.</li>
	<li><strong>Content Type:</strong> <em>Joomla Core Content</em> or <em>K2 Content (Requires K2 to be installed).</em></li>
	<li><strong>Module Class Suffix:</strong> Add a custom class for individual styling</li>
</ul>

<h4>Joomla Core Content</h4>

<ul class="list-icon rightarrow">
	<li><strong>Joomla Section:</strong> Section to load tabbed content from.</li>
	<li><strong>Joomla Category:</strong> Category to load tabbed content from.</li>	
	<li><strong>Joomla Frontpage Items:</strong> Determine whether frontpage content is loaded.</li>
</ul>

<h4>Content Parameters</h4>

<ul class="list-icon rightarrow">
	<li><strong>Item Ordering:</strong> Control tab ordering — <em>Default, Oldest First, Most Recent First, Title Alphabetical, Title Reverse-Alphabetical &amp; Order</em>.</li>
	<li><strong>Default Readmore:</strong> Determine whether the system Read More is active.</li>
	<li><strong>Custom Readmore Text:</strong> Control the label of the Read More.</li>
</ul>

<h4>Animation and Styling</h4>

<ul class="list-icon rightarrow">
	<li><strong>Width:</strong> Set to the width of the container element, or a custom value.</li>
	<li><strong>Max # of Tabs (0 = All):</strong> Control the maximum number of tabs.</li>
	<li><strong>Transition Duration:</strong> Time, milliseconds, for tabs to transition between one another.</li>
	<li><strong>Type of Transition:</strong> Choose between <em>Fading</em> or <em>Scrolling</em> for transition</li>
	<li><strong>Transition Effect:</strong> Determine the effect for tab transition.</li>
	<li><strong>Subtract roktab-links margins:</strong> Control calculation of margins for scrolling tabs.</li>
	<li><strong>Scrollable Tabs:</strong> Determine whether tabs are scrollable when they exceed the specified width.</li>
</ul>

<p class="notice">Subtract roktabs-links margins needs to be enabled for best visual effect with scrollable tabs.</p>

<h4>Tab Details</h4>

<ul class="list-icon rightarrow">
	<li><strong>Tabs Position:</strong> Position of tab row, either <em>Top</em>, <em>Bottom</em> or <em>Hidden</em>.</li>
	<li><strong>Tabs Interaction:</strong> Control transition trigger of tabs, <em>Click</em> or <em>Hover</em>.</li>
	<li><strong>Tabs Title:</strong> Determine how tabs are named, <em>By Incremental</em>, <em>By Content Title</em>, or <em>By first Content h6 tag</em>.</li>
	<li><strong>Incremental prepend text:</strong> If <em>By Incremental</em> is selected, specify the prepended text for each tab.</li>
	<li><strong>Hide h6 tags:</strong> Disables H6 content in the tabs.</li>
	<li><strong>Prefix tabs with numbers:</strong> Inject incremental numbers before tab titles.</li>
	<li><strong>Show Tab Icons:</strong> Display tabs adjacent to the tab titles.</li>
	<li><strong>Tab Icon Side:</strong> Position of tab title icons.</li>
	<li><strong>Tab Icon Path:</strong> Set the path of icon images.</li>
	<li><strong>Tab Icons:</strong> Control which icons appear with each tab title.</li>
</ul>

<h4>Autoplay Settings</h4>

<ul class="list-icon rightarrow">
	<li><strong>Autoplay:</strong> Determine whether tabs transition automatically or manually.</li>
	<li><strong>Autoplay Delay (ms):</strong> Set delay for automatic transition in milliseconds.</li>
</ul>