Viewing file:  tabmenu_class.php (8.72 KB) -rw-rw-r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php
/***
**** @class: tabmenu
**** @version: 1.5;
**** @author: Roberto T. Bichara;
**** @date: 2004-09-10;
**** @license: GNU GENERAL PUBLIC LICENSE;
***/
class tabs{
//Active Tab vars
var $active_color='#0D6797';//background color
var $active_font_color='#FFFFFF';
var $active_font_size='16';
var $active_width='0.5';
var $active_height='3';
//onMouseOver Tab vars
var $over_color='#68A3B9';//background color
var $over_font_color='#FFFFFF';
//Inactive Tab vars
var $inactive_color='#F3F3F3';//background color
var $inactive_font_color='#0D6797';
//Inactive & onMouseOver Tabs vars
var $io_height='1';
var $io_width='0.3';
var $io_font_size='14';
///
var $separation='0';//space between tabs
var $border_color='#666666';
var $border_width='1';
var $border_type='solid';
//Content Divs vars
var $content_width='614px';
var $content_height='291px';
var $content_left='10';
var $content_top='60';
var $content_position='absolute';
var $content_color='#FFFFFF';//background color
var $content_overflow='visible';
///
var $bullet_image='bullet.gif';//relative path or URL to the bullet image
var $draw_bullet=1;//0 if no bullet wanted
var $bullet_pos='R';//position of the bullet R or L (case sensitive)
var $bullet_h=0;//bullet horizontal space
var $bullet_v=0;//bullet vertical space
//width & height of Table below tabs
var $table_width='100%';
var $table_height='3';
var $just_menu=0;//1 if no content divs needed;
#MAIN ARRAYS:
var $array_heads=array();
//TAB TITLES
var $array_contents=array();
/* var $array_heads=array('Ficci�n','No ficci�n');
//CONTENT.
// var $array_contents=array(
'<table><tr><td>
<div id="button-box">
<a href="#" class="buttongrey">View the CSS </a>
</div>
</td></tr>
<tr><td>
<br>
<div id="button-box">
<a href="#" class="buttonblue">Este existe</a>
</div>
<td></tr></table>','content of tab two'
,'Contents of tab 3');
*/
//onClick ACTIONS besides the changing content action
var $array_actions=array();//tab number and tab action in an array;
//example= $array_actions[0]=array(0=>2,1=>'alert(\'HELLO\')')onClick tab 3: alert('HELLO')
var $selected_tab=0;
public function __construct($arrtabs,$arroptions,$arrlenght=30)
{
$this->array_heads=$arrtabs;
$this->array_contents=$arroptions;
//print_r($this);
}
function do_ids(){//function to assign unique ids to the tabs
$len=count($this->array_heads);
$array_ids=array();
for($i=0;$i<$len;$i++)$array_ids[]="id".$i;
return $array_ids;
}
function do_javas($X){//javascript functions to control the tabs behaivor
$javas= '<script type="text/javascript">
var selectedtab="'.$X.'";
var tD="document.all.";
var first=1;
function tab_over(X){
if(X!=selectedtab)eval(tD+X).className="mouseovertab";
}
function tab_out(X){
if(X!==selectedtab)eval(tD+X).className="inactivetab";
}
function show_content(X,Y,Z){
if(X!=selectedtab || first){
eval(tD+selectedtab).className="inactivetab";
eval(tD+X).className="activetab";
first=0;}';
if(!$this->just_menu){
$javas.='if(Y)zindex_value(Y);';}
$javas.='
var fix=selectedtab;selectedtab=X;
if(Z&&fix!=X)eval(Z);
}
function zindex_value(X){//this has becomes visibility(large and short divs in overflow=visible mode)
/*Z++;
eval(tD+X).style.zIndex=Z;*/
var ids = new Array();';$n=0;
foreach($this->do_ids() as $id){
$javas.='ids['.$n.']="'.$id.'c";';
$n++;
}
$javas.='var len=ids.length;for(i=0;i<len;i++){
if(X!=ids[i])eval(tD+ids[i]).style.visibility="hidden";
else eval(tD+ids[i]).style.visibility="visible";
}
}
</script>';
return $javas;
}
function do_styles(){//main css styles to control the tabs look
$styles='<style type="text/css">
.activetab {
color: '.$this->active_font_color.';
text-decoration: none;
background-color: '.$this->active_color.';
margin: 0px '.($this->separation).'px 0px 0px;
padding-top: '.$this->active_height.'px;
padding-right: '.$this->active_width.'em;
padding-bottom: '.$this->active_height.'px;
padding-left: '.$this->active_width.'em;
border-top: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-right: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-bottom: '.$this->border_width.'px none '.$this->border_color.';
border-left: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
font-family: Arial, Helvetica, sans-serif;
font-size: '.$this->active_font_size.'px;
font-weight: 700;
font-variant: normal;
text-transform: none;
cursor: hand;
}
.inactivetab {
color: '.$this->inactive_font_color.';
text-decoration: none;
background-color: '.$this->inactive_color.';
margin: 0px '.($this->separation).'px 0px 0px;
padding-top: '.$this->io_height.'px;
padding-right: '.$this->io_width.'em;
padding-bottom: '.$this->io_height.'px;
padding-left: '.$this->io_width.'em;
border-top: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-right: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-bottom:'.$this->border_width.'px none '.$this->border_color.';
border-left: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
font-family: Arial, Helvetica, sans-serif;
font-size: '.$this->io_font_size.'px;
cursor: hand;
}
.mouseovertab {
color: '.$this->over_font_color.';
text-decoration: none;
background-color: '.$this->over_color.';
margin: 0px '.($this->separation).'px 0px 0px;
padding-top: '.$this->io_height.'px;
padding-right: '.$this->io_width.'em;
padding-bottom: '.$this->io_height.'px;
padding-left: '.$this->io_width.'em;
border-top: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-right: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
border-bottom: '.$this->border_width.'px none '.$this->border_color.';
border-left: '.$this->border_width.'px '.$this->border_type.' '.$this->border_color.';
font-family: Arial, Helvetica, sans-serif;
font-size: '.$this->io_font_size.'px;
cursor: hand;
}
.divvalues {
position: '.$this->content_position.';
height: '.$this->content_height.';
width: '.$this->content_width.';
left: '.$this->content_left.'px;
top: '.$this->content_top.'px;
background-color: '.$this->content_color.';
z-index: 3;
overflow: '.$this->content_overflow.';
}
.buttongrey {
border-top: 1px solid #8f8f8f;
background: #404040;
background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#404040));
background: -moz-linear-gradient(top, #a1a1a1, #404040);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.buttongrey:hover {
border-top-color: #969696;
background: #969696;
color: #ccc;
}
.buttongrey:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
';
return $styles;
}
function make_tab(){
$array_ids=$this->do_ids();$n=0;
foreach($array_ids as $id){
$contents[$id]=$this->array_contents[$n];
$heads[$id]=$this->array_heads[$n];
$n++;}
$selected_tab_id=$array_ids[$this->selected_tab];
$javas=$this->do_javas($selected_tab_id);
$styles=$this->do_styles();
$main_body='';$n=0;
if($this->draw_bullet){
$a='bullet';$b=$this->bullet_pos;$c=$a.$b;$$c='<img src="'.$this->bullet_image.'" vspace="'.$this->bullet_v.'">';$hs=intval($this->bullet_h);
while($hs>0){$$c.=' ';$hs--;}}//using hspace destroys the spans.
foreach($array_ids as $id){
foreach($this->array_actions as $action){if($action[0]==$n)$j_act=addslashes($action[1]);}
$n++;
$main_body.='<span class="inactivetab" id="'.$id.'" onMouseOver="tab_over(\''.$id.'\');" onMouseOut="tab_out(\''.$id.'\');" onClick="show_content(\''.$id.'\',\''.$id.'c\',\''.$j_act.'\');">'.$bulletL.$heads[$id].$bulletR.'</span>';
unset($j_act);}
//The ids of the containers divs are tabid.='c'
if(!$this->just_menu){
foreach($array_ids as $id){
$main_body.='<div id="'.$id.'c" class="divvalues">'.$contents[$id].'</div>';}}
$main_body.='<table width="'.$this->table_width.'" border="0" cellpadding="0" cellspacing="0" bgcolor="'.$this->active_color.'"><tr>
<td height="'.$this->table_height.'"></td></tr></table><script>show_content("'.$selected_tab_id.'","'.$selected_tab_id.'c");</script>';
$menu= $javas."
".$styles."
".$main_body;
//return $menu;
echo $menu;//print it
}
}
?>
|