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';
include('./views/page.header.html');
?>
<div id="main-container">
<script type="text/javascript" src="./controllersJS/tabs.js"></script>
<script type="text/javascript">
function change_onglet(name){
let listeNoms = ['rules','niouzes','about'];
for(let i=0;i<listeNoms.length;i++){
if(listeNoms[i] == name){
document.getElementById('onglet_'+name).className = 'onglet_1 onglet active';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
}
else{
document.getElementById('onglet_'+listeNoms[i]).className = 'onglet_0 onglet';
document.getElementById('contenu_onglet_'+listeNoms[i]).style.display = 'none';
}
}
var tabs = new TabMenu(
['rules','about','niouzes'],
["<?php echo $lang['rules']; ?>",
"<?php echo $lang['about']; ?>",
"<?php echo $lang['niouzes']; ?>"]
);
window.onload = function(){
tabs.init('onglets');
tabs.switchTo('niouzes');
}
</script>
<div id="infos-container">
<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 id="contenu-onglets">
<div class="contenu_onglet" id="contenu_onglet_rules">
......@@ -50,9 +43,6 @@ include('./views/page.header.html');
</div>
</div>
</div>
<script type="text/javascript">
change_onglet('niouzes');
</script>
</div>
<?php
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