1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Base de l'interface</title>
<style>
#liste,
#paroles,
#pics {
height : 200px;
width : 300px;
border : 1px solid grey;
display : inline-block;
margin : .1em;
}
#Choose-Liste button {
background-color: #fff;
}
#Choose-Liste button.select {
background-color: #aaaaff;
}
</style>
</head>
<body>
<div id="Choose-Liste">
<button data-liste="0" class="select" >Liste1</button>
<button data-liste="1">Liste2</button>
</div>
<object type="text/html" data="" id="liste" class="gauche"></object>
<object type="text/html" data="" id="paroles" class="milieu"></object>
<object type="text/html" data="" id="pics" class="droite"></object>
<script>
const Bt_Listes = document.querySelectorAll('#Choose-Liste button')
, tab_listes = [ { liste: 'xListe1.html'}
, { liste: 'xListe2.html'}
]
, tab_Actu = [ { paroles: 'txt_01.html', pics:'ext_01.html' }
, { paroles: 'txt_02.html', pics:'ext_02.html' }
, { paroles: 'txt_03.html', pics:'ext_03.html' }
, { paroles: 'txt_04.html', pics:'ext_04.html' }
]
, Obj = { liste : document.getElementById('liste')
, paroles : document.getElementById("paroles")
, pics : document.getElementById("pics")
}
// init :
Obj.liste.data = tab_listes[0].liste
Obj.paroles.data = tab_Actu[0].paroles
Obj.pics.data = tab_Actu[0].pics
Bt_Listes.forEach(bt=>
{
bt.onclick=e=>
{
Bt_Listes.forEach(BtX=>BtX.className='')
e.target.className = 'select'
let ref = parseInt(e.target.dataset.liste)
ChangeObject( 'liste', tab_listes[ref].liste)
}
});
window.onmessage=e=>
{
let ref = parseInt(e.data) // pour messages plus complexes utiliser un json stringifié
ChangeObject( 'paroles', tab_Actu[ref].paroles)
ChangeObject( 'pics', tab_Actu[ref].pics)
}
function ChangeObject(oName, url)
{
let FileName = Obj[oName].data.split('/').pop() // attention si sous dossier, sinon ajouter une valeur dataset
if (FileName === url) return // la rageuse énergie à clicker inutilement ne transformera rien
let Pnode = Obj[oName].parentNode
, Lnode = Obj[oName].cloneNode(true)
Lnode.data = url
Obj[oName].style.display = 'none'
Pnode.insertBefore(Lnode, Obj[oName])
Pnode.removeChild(Obj[oName])
Obj[oName] = document.getElementById(oName)
}
</script>
</body>
</html> |
Partager