Vous avez reçu un message "Your GitLab account has been locked ..." ? Pas d'inquiétude : lisez cet article https://docs.gricad-pages.univ-grenoble-alpes.fr/help/unlock/

Commit 20d92be3 authored by Mathieu Loiseau's avatar Mathieu Loiseau
Browse files

Class for tabs…

parent 1cedcdac
"use strict";
class TabMenu{
constructor(idList, titleList, tabPrefix = "onglet_", contentPrefix = "contenu_onglet_"){
if(idList.length>0 && idList.length==titleList.length){
this.ids = idList;
this.titles = titleList;
this.tabPrefix = tabPrefix;
this.contentPrefix = contentPrefix
}
else{
throw "Tabs arrays don't have the same length";
}
}
switchTo(tabId){
document.getElementById(this.tabPrefix+tabId).className = 'onglet_1 onglet active';
document.getElementById(this.contentPrefix+tabId).style.display = 'block';
for(let i = 0; i<this.ids.length;i++){
if(this.ids[i] != tabId){
document.getElementById(this.tabPrefix+this.ids[i]).className = 'onglet_0 onglet';
document.getElementById(this.contentPrefix+this.ids[i]).style.display = 'none';
}
}
}
toString(){
let res = '<ul class="nav nav-tabs">';
for(let i = 0; i<this.ids.length;i++){
res += "\n"+'<li role="presentation" class="onglet_0 onglet" id="'+
this.tabPrefix+this.ids[i]+'"><a>'+this.titles[i]+'</a></li>';
}
res += "\n</ul>";
return res;
}
init(containerID){
var elt = document.getElementById(containerID);
if(typeof elt != "undefined"){
elt.innerHTML = ""+this;
self = this;
for(let i = 0; i<this.ids.length;i++){
let id = this.ids[i];
let tmpElt = document.getElementById(this.tabPrefix+id);
if(typeof tmpElt != "undefined"){
tmpElt.onclick = function(){self.switchTo(id);};
}
else{
throw "Could not retrieve element "+id;
}
}
this.switchTo(this.ids[0]);
}
else{
throw "Could not retrieve element "+containerID;
}
}
}
...@@ -3,28 +3,21 @@ $title = 'Information'; ...@@ -3,28 +3,21 @@ $title = 'Information';
include('./views/page.header.html'); include('./views/page.header.html');
?> ?>
<div id="main-container"> <div id="main-container">
<script type="text/javascript" src="./controllersJS/tabs.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function change_onglet(name){ var tabs = new TabMenu(
let listeNoms = ['rules','niouzes','about']; ['rules','about','niouzes'],
for(let i=0;i<listeNoms.length;i++){ ["<?php echo $lang['rules']; ?>",
if(listeNoms[i] == name){ "<?php echo $lang['about']; ?>",
document.getElementById('onglet_'+name).className = 'onglet_1 onglet active'; "<?php echo $lang['niouzes']; ?>"]
document.getElementById('contenu_onglet_'+name).style.display = 'block'; );
} window.onload = function(){
else{ tabs.init('onglets');
document.getElementById('onglet_'+listeNoms[i]).className = 'onglet_0 onglet'; tabs.switchTo('niouzes');
document.getElementById('contenu_onglet_'+listeNoms[i]).style.display = 'none';
}
}
} }
</script> </script>
<div id="infos-container"> <div id="infos-container">
<div id="onglets"> <div id="onglets">
<ul class="nav nav-tabs">
<li role="presentation" class="onglet_0 onglet" id="onglet_rules" onclick="javascript:change_onglet('rules');"><a><?php echo $lang['rules']; ?></a></li>
<li role="presentation" class="onglet_0 onglet" id="onglet_about" onclick="javascript:change_onglet('about');"><a><?php echo $lang['about']; ?></a></li>
<li role="presentation" class="onglet_0 onglet" id="onglet_niouzes" onclick="javascript:change_onglet('niouzes');"><a><?php echo $lang['niouzes']; ?></a></li>
</ul>
</div> </div>
<div id="contenu-onglets"> <div id="contenu-onglets">
<div class="contenu_onglet" id="contenu_onglet_rules"> <div class="contenu_onglet" id="contenu_onglet_rules">
...@@ -50,9 +43,6 @@ include('./views/page.header.html'); ...@@ -50,9 +43,6 @@ include('./views/page.header.html');
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript">
change_onglet('niouzes');
</script>
</div> </div>
<?php <?php
include('./views/page.footer.html'); include('./views/page.footer.html');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment