WordPress - Tabbed Forms
I found this method to format a web page as a tab control as a part of MM Forms.
Basically, parts of the page are placed in uniquely named div blocks.
When the tabs are clicked, the code simply hides all but one of the blocks.
The tabs themselves are the elements of an unordered list.
The stylesheet hides the list formatting and renders the anchor tags as boxes
(tabs) on a single line. The list class is used to control the color
of the currently selected tab.
Clicking on a "tab" calls the code that changes the visibility and color.
(Simple)
Defining the tab contents
| Javascript code
| Stylesheet
| Defining the Tabs
| Imbedding the files
Defining the tab contents
Each "page" of data needs to be enclosed in a uniquely named div block.
Only one section should be the current_tab,
the rest have their class set to inactive_tab.
| <![CDATA[
<div id="main_tab" class="current_tab">
define your page here
</div><div id="inst_tab" class="inactive_tab">
define your page here
</div>]]>
|
Any items you want displayed on all tabs (perhaps a submit button)
can be placed either before or after the div blocks.
Testing shows that both div and span work.
Javascript code
Javascript code (from mmf-tabs.js) changes the tab colors and displays the associated div
| <![CDATA[
function show_tab(sender,others,div,oth_divs)
{
ids = document.getElementById(others).getElementsByTagName('li');
for(i=0; i<ids.length; i++){
ids[i].className = '';
}
sender = document.getElementById(sender);
sender.className = 'current';
div_to_open = document.getElementById(div);
div_to_open.style.display = 'block';
divs_to_close = oth_divs.split(",");
for(k=0; k<divs_to_close.length; k++){
document.getElementById(divs_to_close[k]).style.display = 'none';
}
}]]>
|
Stylesheet
- Do not show the list
- The list elements are forced to upper case
- Controls the 3 tab colors - Normal, Selected, Hover
(In my opinion, hover and selected should have different colors)
- The frequent use of the phrase "color theme" implies that this code was created
by some page editing software
#form_tabs{
padding: 0;
width: 100%;
border-bottom: 5px solid #464646;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
float:left;
padding-bottom:2px;
}
#form_tabs ul{
margin:0;
padding: 0;
list-style: none;
}
#form_tabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
#form_tabs a{
float: left;
display: block;
font: bold 11px Arial;
text-decoration: none;
margin: 0 5px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: #464646; /*Brown color theme*/
border-top: 1px solid white;
color: white;
}
#form_tabs a:hover{
background-color: #c6d9e9; /*Brown color theme*/
color:#246;
}
#form_tabs .current a{ /*currently selected tab*/
background-color: #c6d9e9; /* 464646 Brown color theme*/
color:#246;
border-color:#FFFFFF;
}
.current_tab{
display:block;
}
.inactive_tab{
display:none;
}
|
Defining the Tabs
The tabs are defined as list elements -
the stylesheet and javascript code will format these as tabs.
Each list element must be formatted like this
- The tab part must be inside a div id="form_tabs" block for this style sheet to work
- class="current" should be assigned to only one tab, the rest should be null.
| <![CDATA[
<div id="form_tabs">
<ul id="form_tab_container">
<li id="form_xyz_tab" class="current" style="margin-left: 1px">
<a href="#"
onclick="show_tab('form_xyz_tab', 'form_tab_container', 'xyz_tab', 'x1_tab,x2_tab,x3_tab')"
title="xyz"
>xyz</a></li>
<li id="form_main_tab" class="" style="margin-left: 1px">
<a href="#"
onclick="show_tab('form_main_tab', 'form_tab_container', 'main_tab', 'flyer_tab,press_tab,inst_tab')"
title="Main"
>Main</a></li>
</ul>
</div>]]>
|
Imbedding the files
Both the javascript and stylesheet files should be included in the web page header.
Please be sure to add the newline (\n) characters to help make the page human readable.
| <![CDATA[
add_action('wp_head', array(&$this, 'wp_head')); // called when html header is processed
function wp_head() {
echo "<! Tags added for [my_application_name] >\n";
$form_tabs_css = get_option('siteurl') . '/wp-content/plugins/lib-events/form-tabs.css';
$form_tabs_js = get_option('siteurl') . '/wp-content/plugins/lib-events/form-tabs.js';
echo '<link type="text/css" href="'.$form_tabs_css.'" rel="stylesheet" />'."\n";
echo '<script type="text/javascript" src="'.$form_tabs_js .'"></script>'."\n";
}]]>
|
Note that the newline character (\n) only works
when placed in double quotes.
If single quotes are used, it is simply printed without translation..
The last 2 echo commands could have also been entered as
echo "<link type=\"text/css\" href=\"{$form_tabs_css}\" rel="stylesheet" />\n";
echo "<script type=\"text/javascript\" src=\"{$form_tabs_js}\"></script>\n";
|
Where
- The entire string is enclosed in double quotes
- The embedded double quotes are escaped (replaced with \")
- The concatenate operators are removed
- The variables are enclosed in curley braces (probably not required in this case, but a good practice)
Author:
Robert Clemenzi