Revision [1217]
The oldest known version of this page was edited on 2010-01-06 01:24:36 by ChadAuldTabs
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');
?>
aliroHTML::getInstance()->tabsFromMarkup('demo');
?>
That will generate a setup of tabs that look like the following screenshot:
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 */
}
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 */
}