Bonjour à tous,
J’avais commencé a posté dans le post initiale mais afin de ne pas le polluer, et sur recommandation de @noBru77 je vais poursuivre mes péripéties ici !
Le but est simple !
- Mon menu en faut, dimension 1280x80
- Contenu au centre, dimension 1280x570
- Footer en bas, dimension 1280x150
…
Ce qui nous fait donc un espace de 1280x800 qui correspond à la résolution de ma tablette.
Pour y parvenir, j’ai donc créé 3 HTMLDisplay (Menu, Contenu, Footer) que voilà !
Menu
<!--
@noodom / Menu F$B33 : ajout de la gestion des boutons par fichier JSon
- reprise du menu FSB33 simplifié par @salvialf en ajoutant la gestion des boutons par un paramétrage JSon
- il n'y a plus besoin de modifier le code : seul le fichier perso.json est à adapter à son menu
- pour valider que le fichier perso.json est correct :
- copier son contenu ici : https://jsonlint.com/
- cliquer sur 'Validate JSON'
- le résultat sous Result doit être vert avec le message 'Valid JSON'
-->
<link href="montheme/menuJsonFsb33Frame/css/perso.css" rel="stylesheet" type="text/css">
<div class="menu_top">
</div>
<script>
$(document).ready(function () {
let menuTop = $('.menu_top');
menuTop.append('Chargement du menu..');
$.getJSON('montheme/menuJsonFsb33Frame/json/perso.json' + '?v=' + (new Date()).getTime(), function (data) {
let buttons = data.buttons.map(function (button) {
return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer + ')">'
+ '<li class="monmenu">'
+ '<div class="imagette"><img src="' + button.icon + '" height=50px width=50px></div></br>'
+ '</li>'
+ '</a>';
});
menuTop.empty();
if (buttons.length) {
let listButtons = buttons.join(' ');
let menuList = $('<ul class="monmenu" />').html(listButtons);
menuTop.append(menuList);
}
let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
})
});
function gotoPlan(id, idFooter) {
let urlDestination = getUrlDestination(id);
let urlDestinationFooter = getUrlDestination(idFooter);
// get frame in htmlDisplay equipment
let frameDestination = document.getElementById('menuFrame');
let frameDestinationFooter = document.getElementById('menuFooter');
if (frameDestination == null) {
// no frame : page redirection
planHeader_id = id;
displayPlan();
}
else {
// display focus
$('.monmenu').removeClass('selected');
$('#' + id + ' li').addClass('selected');
// frame redirection
if (frameDestination.src.split('?')[1] != urlDestination.split('?')[1]) {
frameDestination.src = urlDestination;
}
// frame footer redirection
if (frameDestinationFooter.src.split('?')[1] != urlDestinationFooter.split('?')[1]) {
frameDestinationFooter.src = urlDestinationFooter;
}
}
}
</script>
Contenu
<iframe id="menuFrame" src="about:blank" style="width:100%;height:100%;border:none;"/>
Footer
<iframe id="menuFooter" src="about:blank" style="width:100%;height:100%;border:none;"/>
Coté perso.json, voilà ce que j’ai !
{
"buttons": [
{
"link": "25",
"icon": "montheme/menuJsonFsb33Frame/img/icon_home.png",
"footer" : "29"
},
{
"link": "26",
"icon": "montheme/menuJsonFsb33Frame/img/icon_light.png",
"footer" : "29"
},
{
"link": "27",
"icon": "montheme/menuJsonFsb33Frame/img/icon_camera.png",
"footer" : "29"
},
{
"link": "28",
"icon": "montheme/menuJsonFsb33Frame/img/icon_camera.png",
"footer" : "29"
}
],
"parameters": {
"menu_x": "0px",
"menu_y": "0px",
"menu_width": "1280px",
"menu_height": "80px",
"content_x": "0px",
"content_y": "80px",
"content_width": "1280px",
"content_height": "570px",
"foot_x": "0px",
"foot_y": "570px",
"foot_width": "1280px",
"foot_height": "150px"
}
}
Perso.css
div.menu_top {
width: 1280px;
height: 70px;
background-color: rgba(0, 0, 0, 0.6);
#border-bottom: 2px solid rgba(0, 0, 0, 1);
}
ul.monmenu ul.monmenu_sep {
list-style-type: none;
color: rgba(255, 255, 255, 0.8);
font-family: Roboto;
font-size: 16px;
font-weight: normal;
}
li.monmenu {
display: inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(0, 0, 0, 0.2);
}
div.imagette {
text-align: center;
margin-bottom: 5px;
opacity: 0.8;
}
li.monmenu:hover {
background-color: rgba(255, 255, 255, 0.2);
}
li.selected {
display: inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.2);
}
li.monmenu_sep {
display: inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
div.bouton {
opacity: 1;
}
div.bouton:hover {
opacity: 0.5;
}
Voilà ! merci pour cotre aide, j’ai le cerveau en ébullition ! ^^
