Wiki

HowTo - Usage of Accessible Tabs without modChrome

You can use the Accessible Tabs from the JYAML 4.x+ Framework everywhere you want, within Joomla!.

Script Path: /libraries/jyaml/html/js/accessible_tabs.js

HTML Markup Example

<div class="jyaml-tabs myTabs clearfix">
 <h3><span>Tab 1</span></h3>
 <div class="tabbody">
 <div class="tabbody-content">
 Tab 1: Contents
 </div>
 </div>
 
 <h3><span>Tab 2</span></h3>
 <div class="tabbody">
 <div class="tabbody-content">
 Tab 2: Contents
 </div>
 </div>
 
 <h3><span>Tab 3</span></h3>
 <div class="tabbody">
 <div class="tabbody-content">
 Tab 3: Contents
 </div>
 </div>
</div>

Required Javascript and options

<?php
 // JYAML Instance
 $jyaml = JYAML::getDocument();
 
 // JYAML Tabs Options (see: [JOOMLA_ROOT]/libraries/jyaml/html/js/accessible_tabs.js)
 $options = array();
 $options[] = "tabhead: 'h3'";
 $options[] = "syncheights: true";
 $options[] = "autoAnchor: true";
 $options[] = "currentInfoText: ' ".JText::_('JYAML_TABS_CURRENT_TEXT')." '";
 $options[] = "currentInfoPosition: '".($jyaml->direction=='rtl' ? 'after' : 'before')."'";
 $options[] = "orientation: 'horizontal'";
 $options[] = "effects: null"; // ['slide'], ['fade'], ['slide', 'fade'] or null
 $options[] = "slideDirection: 'horizontal'";
 $options[] = "position: 'top'";
 $options[] = "pagination: true";
 $options[] = "saveState: false";
 
 // Add Javascript
 JHtml::_('jyaml.tabs', '.myTabs', $options);
 // Add Stylesheet
 $jyaml->addStylesheet($jyaml->getUrl('css', 'screen.tabs.css'));

For all options look in the Javascript source-code: /libraries/jyaml/html/js/accessible_tabs.js
The Code JHtml::_('jyaml.tabs', '.myTabs', $options); calls the function in /libraries/jyaml/html/jyaml.php

Basic Stylesheet

See: templates/jyaml/css/screen.tabs.css