Oyo 68 messages 07/06/2007 |
Oui ^^ Désolé hier j'étais mort ! enfin bon de toute façon je n'ai pas présenté se projet ^^
Le script n'est pas de moi, je l'ai trouvé sur le net :/ le JS est moi ça fait 2...
Voila le code pour l'init des onglets:
**Code **
``// Dйfinition d'un onglet
var Tab = Class.create();
Tab.prototype =
{
// Initialisation
initialize : function (id, tab_id, panel_id, parent)
{
// On enregistre les objets liйs (onglet, paneau, Tabpanel parent)
this . tab = $(tab_id);
this . panel = $(panel_id);
this . parent = parent;
this . id = id;
// Par dйfaut, la souris ne le survolle pas
this . hovering = false;
// On change la classe de l'onglet
this . change_class(this . tab . className, this . tab . className);
this . tab . onclick = function(e)
{
parent . active_tab (id);
};
},
// Changement de classe
change_class : function (c, hc)
{
// On enregistre un nouvel йvйnnement de sortie de la souris
this . tab . onmouseover = function(e)
{
this . className = hc;
};
this . tab . onmouseout = function(e)
{
this . className = c;
};
// Si la souris n'est pas dessus en ce moment, on exйcute cet йvйnnement
if (this . hovering)
this . tab . onmouseover(0);
else
this . tab . onmouseout(0);
},
// Changement d'affichage
change_display : function (d)
{
this . panel . style . display = d;
}
}
// Dйfinition d'un panneau а onglet
var Tabpanel = Class.create();
Tabpanel.prototype =
{
// Initialisation
initialize : function (tabs, active_id, active_class, active_hover, unactive_class, unactive_hover, display_on, display_off)
{
this . tabs = new Array();
this . active_id = -1;
for (var i = 0; i<tabs.length; i++)
{
this . add_tab (i, tabs[i].tab, tabs[i].panel);
}
this . active_id = active_id;
this . set_class_unactive ( unactive_class, unactive_hover );
this . set_class_active ( active_class, active_hover );
this . set_class_display ( display_on, display_off );
//active_tab(active_id);
},
// Ajout d'un onglet
add_tab : function (id, tab_id, panel_id)
{
this . tabs[ this . tabs.length] = new Tab(id, tab_id, panel_id, this);
},
// Changement de classe d'un onglet
change_class : function (i, c, hc)
{
if (i >= 0)
{
this . tabs[i] . change_class (c, hc);
}
},
// Changement de classe d'un onglet
change_display : function (i, d)
{
if (i >= 0)
{
this . tabs[i] . change_display (d);
}
},
// Changement de la classe inactive
set_class_unactive : function (c, hc)
{
this . unactive_class = c;
this . unactive_hover = hc;
for (var i=0; i<this . tabs.length; i++)
{
if (i != this . active_id)
{
this . change_class(i, c, hc);
}
}
},
// Changement de la classe active
set_class_active : function (c, hc)
{
this . active_class = c;
this . active_hover = hc;
this . change_class (this . active_id, c, hc);
},
// Changement de la classe inactive
set_class_display : function (don, doff)
{
this . display_on = don;
this . display_off = doff;
for (var i=0; i<this . tabs.length; i++)
{
this . change_display(i, i == this . active_id ? don : doff);
}
},
// Activation d'un onglet
active_tab : function (active_id)
{
this . change_class (this . active_id, this . unactive_class, this . unactive_hover);
this . change_display(this . active_id, this . display_off);
this . active_id = active_id;
this . change_class (this . active_id, this . active_class, this . active_hover);
this . change_display(this . active_id, this . display_on);
}
}``
Voila le code js pour les onglets:
**Code **
``var tab_droite = new Tabpanel(
[{tab:'site_tab',panel:'site_panel'} , {tab:'graph_tab',panel:'graph_panel'} , {tab:'autres_tab',panel:'autres_panel'}],
0,
'tab_active', 'tab_active_hover','tab_inactive','tab_inactive_hover',
'table', 'none'
);``
Voila mon code html, je me sert de phpBB
**Code **
``<table class="bodyline_tab_ctrl" border="0" cellspacing="0" cellpadding="5" align="center" width="100%" summary="Header 2">
<tr>
<td align="left" class="tab_active" id="site_tab"><p><b>Onglet 1</b></p></td>
<td align="left" class="tab_inactive" id="graph_tab"><p><b>Onglet 2</b></p></td>
<td align="left" class="tab_inactive" id="autres_tab"><p><b>Onglet 3</b></p></td>
</tr>
</table>
<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:table;height: 380px" id="site_panel" summary="Site Web">
<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="10" /></td>
</tr>
<tr>
<td width="100%" align="left" valign="top">
<!-- BEGIN site -->
{site.DISPLAY}
<!-- END site -->
</td>
</tr>
</table>
<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:none;height: 380px" id="graph_panel" summary="Graphisme">
<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="2" /></td>
</tr>
<tr>
<td width="100%" align="left" valign="top">
<p class="text">Type</p>
</td>
</tr>
</table>
<table class="bodyline_tab_panel" border="0" cellspacing="0" cellpadding="11" width="100%" align="center" style="display:none;height: 380px" id="autres_panel" summary="Autres">
<tr>
<td width="100%" align="left"><img src="images/spacer.gif" alt="" title="" width="100%" height="2" /></td>
</tr>
<tr>
<td width="100%" align="left" valign="top">
<p class="text">Projet</p>
</td>
</tr>
</table>``DISPLAY est une l'init de carousel dans un boucle afin de pouvoir en génere plusieurs sur la même page :)
|