Aliro Documentation: Tabs

Tabs

A simple way to create accessible tabs within Aliro is to make use of the aliroHTML::tabsFromMarkup method. This method makes use of the YUI TabView widget∞.

Step 1

Lay our your extensions DOM structure as shown in the example below:

<div id="demo" class="yui-navset">
	<ul class="yui-nav">
		<li><a href="#tab1"><em>Tab One Label</em></a></li>
		<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
		<li><a href="#tab3"><em>Tab Three Label</em></a></li>
	</ul>            
	<div class="yui-content">
		<div id="tab1"><p>Tab One Content</p></div>
		<div id="tab2"><p>Tab Two Content</p></div>
		<div id="tab3"><p>Tab Three Content</p></div>
	</div>
</div>

Note: For more on this structure see the following guide∞.

Step 2

Pass the id of the tab container setup in step 1 to the aliroHTML::tabsFromMarkup() method.

Example:

<?php

aliroHTML::getInstance()->tabsFromMarkup('demo');

?>

That will generate a setup of tabs that look like the following screenshot:
tabs

Styling Tabs

Tab rely on the YUI TabView widget under the hood. To target a tabs for styling you'll need to use CSS selectors with a combination of DOM element references and various YUI related classes. The default admin and at_galley templates both contain some basic tab selectors for reference. Here are the basics used to generate the screenshots displayed above:

#AliroAdminMain div ul.yui-nav {

    border-color: black;

}

#AliroAdminMain div ul.yui-nav a {

    background: none; /* tab background */

}

/* Non-active tab hover */

#AliroAdminMain div ul.yui-nav a:hover {

    background: none;

    background-color: orange;

    color: black;

}

/* Selected tab */

#AliroAdminMain div .yui-nav .selected a,

#AliroAdminMain div .yui-nav .selected a:focus, /* no focus effect for selected */

#AliroAdminMain div .yui-nav .selected a:hover { /* no hover effect for selected */

    background: none;

    background-color: black;

    color: white;

}

/* Selected tab border */

#AliroAdminMain div .yui-nav .selected a,

#AliroAdminMain div .yui-nav .selected a em {

    border-color: black;

}

/* Content background color */

#AliroAdminMain div .yui-content {

    background: none; 

    background-color: #F5F5F5; /* probably best to match table */

}