Petite modification du menu de F$B33 que beaucoup utilise pour les Designs.
Adaptez les chemins en fonction de votre organisation, pour moi tous ce que je fais est das un répertoire custom à la racine de Jeedom.
L’avantage de cette modification, c’est d’avoir un seul et même fichier qui gère les menus de toutes les pages des designs.
Dans un Design, Ajouter un text/Html avec le contenu Suivant :
<script>
$(function () {
$("#menu-custom").load("custom/theme/menu.html");
});
var idIs = 1; // value of plan_id for active link
</script>
<div id="menu-custom"></div>v>
Dans chaque page, changer l’idIs par l’id de la page en cours (se voit dans l’URL)
Dans le répertoire /custom/theme/ copier le fichier menu.html
Dans ce fichier modifier la variable links avec les valeur des plan_id et les noms des images associées dans le répertoire /custom/theme/images/
var links = {
1: { plan_id: 1, img: "icon_home.png"},
2: { plan_id: 3, img: "icon_skydive.png"},
3: { plan_id: 8, img: "icon_light.png"},
4: { plan_id: 7, img: "icon_planning2.png"},
5: { plan_id: 7, img: "icon_graff.png"},
6: { plan_id: 9, img: "icon_volets.png"},
7: { plan_id: 7, img: "icon_chauffage.png"},
8: { plan_id: 7, img: "icon_reseau.png"},
};
Contenu du fichier : menu.html
<ul class="nav custom-menu flex-column"></ul>
<script>
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null) {
return null;
}
return decodeURI(results[1]) || 0;
};
var links = {
1: { plan_id: 1, img: "icon_home.png"},
2: { plan_id: 11, img: "icon_skydive.png"},
3: { plan_id: 8, img: "icon_light.png"},
4: { plan_id: 0, img: "icon_planning2.png"},
5: { plan_id: 13, img: "icon_graff.png"},
6: { plan_id: 9, img: "icon_volets.png"},
7: { plan_id: 0, img: "icon_chauffage.png"},
8: { plan_id: 12, img: "icon_reseau.png"},
};
console.log(idIs);
$.each( links, function (key, val) {
if (idIs === val.plan_id) {
active_class = 'active';
} else {
active_class = 'podzob';
}
$('ul.nav.custom-menu').append(' <li class="nav-item">\n' +
' <a class="nav-link '+active_class+'" href="index.php?v=d&p=plan&plan_id='+val.plan_id+'">\n' +
' <img height=100px width=100px src="custom/theme/images/'+val.img+'">\n' +
' </a>\n' +
' </li>')
});
$(".nav-link").click(function () {
let id_is = $(this).attr('href');
var current = (id_is[id_is.length -1]);
});
</script>