Citation :
<script>
/*
On récupère la SECTION principale.
C'est dans celle-ci que le script va travailler
*/
var main_section = document.getElementById('main_section');
/*
On récupère la SECTION principale.
C'est dans celle-ci que le script va travailler
*/
var main_section = document.getElementById('main_section');
/*
On initialise les MENUs et les PAGEs
C'est à dire qu'on active le premier
TAB (onglet) de chaque SECTION
et on affiche la PAGE correspondante
*/
var menu = childs(main_section)[1];
reset(menu);
/*
Cette fonction va selectionner le premier TAB du MENU fourni,
et afficher la PAGE correspondante en faisant un RESET des
MENUs qui sont dans le CONTENT
*/
function reset(menu)
{
// En paralèlle au menu est le contenu Cf HTML
var content = next(menu);
// On reset le menu courant
var tabs = childs(menu);
for(var k = 0; k < tabs.length; k++)
{
// Si c'est le premier onglet du menu
if(k == 0)
{
$(tabs[k]).removeClass('unactive').addClass('active');
tabs[k].onclick = function(){ return false; };
}
// Sinon ..
else
{
$(tabs[k]).removeClass('active').addClass('unactive');
tabs[k].onclick = function(){ click(this); };
}
}
// On reset les pages courantes
var pages = childs(content);
for(var k = 0; k < pages.length; k++)
{
if(k == 0)
{
$(pages[k]).removeClass('undisplayed').addClass('displayed');
}
else
{
$(pages[k]).removeClass('displayed').addClass('undisplayed');
}
}
// On RESET les menus des pages
var menus = content.getElementsByClassName('menu');
for(var k = 0; k < menus.length; k++)
{
reset(menus[k]);
}
}
/*
Cette fonction selectionne le TAB fourni, active la PAGE correspondante,
et RESET les MENUs du CONTENT.
*/
function click(tab)
{
// Menu et content
var menu = tab.parentNode;
var content = next(menu);
// On reset le menu courant
var tabs = childs(menu);
var n = -1;
for(var k = 0; k < tabs.length; k++)
{
// Si c'est l'onglet sur lequel on a cliqué
if(tabs[k] == tab)
{
n = k;
$(tabs[k]).removeClass('unactive').addClass('active');
tabs[k].onclick = function(){ return false; };
}
// Sinon ...
else
{
$(tabs[k]).removeClass('active').addClass('unactive');
tabs[k].onclick = function(){ click(this); };
}
}
// On reset les pages courantes
var pages = childs(content);
for(var k = 0; k < pages.length; k++)
{
if(k == n)
{
$(pages[k]).removeClass('undisplayed').addClass('displayed');
}
else
{
$(pages[k]).removeClass('displayed').addClass('undisplayed');
}
}
// On reset les menus des pages courantes
var menus = content.getElementsByClassName('menu');
for(var k = 0; k < menus.length; k++)
{
reset(menus[k]);
}
}
/*
Retourne le Noeud du DOM (hors noeud de text) suivant le node donné
*/
function next(node)
{
var next = node.nextSibling;
while(next && next.nodeType != 1)
{
next = next.nextSibling;
}
return next;
}
/*
Retourne les Noeud du DOM (hors noeud de text) enfants du node donné
*/
function childs(node)
{
var child_nodes_temp = node.childNodes;
var child_nodes = new Array();
for(var k = 0; k < child_nodes_temp.length; k++)
{
if(child_nodes_temp[k].nodeType == 1)
{
child_nodes.push(child_nodes_temp[k]);
}
}
return child_nodes;
}
</script>
|
