[TUTO noodom] Nouvelle refonte du menu F$B33 avec navigation par frame

Bonjour à tous,

Je suis en v4 et je cherche à adapter le superbe travail réalisé par @noodom. J’utilise le plugin htmlDisplay où j’ai créé un équipement Menu et un équipement Contenu. Voici ce que je souhaite obtenir et ce que j’ai déjà fait:

Le but:

  • Utiliser la navigation par menu icônes, à droite, à la verticale.
  • Utiliser les Frames pour afficher une page design suivant le choix du bouton
  • Avoir an bas du design, une deuxième Frame affichant une autre page de design, comme un pied de page.
  • Définir dans le fichier JSON l’ID du design à afficher dans cette deuxième Frame.

J’ai réussi à:

  • Adapter les fichiers CSS, HTML et JSON pour avoir une navigation par boutons-icônes à la verticale et,
  • Afficher dans la Frame Contenu ‹ menuFrame › le design sélectionné par un bouton du menu,
  • Ajouter au JSON des paramètres supplémentaires pour la deuxième Frame: ID du design contenant cette nouvelle Frame, x, y, largeur et hauteur (facile).
  • Créer un troisième équipement htmlDisplay ‹ Footer › contenant la déclaration d’une deuxième Frame:
<iframe id="menuFooter" src="about:blank" style="width:100%;height:100%;border:none;"/>

Ce que je n’arrive pas à obtenir (je ne connais rien en JQuerry et autre joyeuseté de programmation de même style, mais je cherche pour comprendre):

  • Comment déclarer cette deuxième Frame dans le fichier HTML, qui s’appelle ‹ menuFooter › pour menu pied de page, .
  • Lui assigner l’ID d’un design à récupérer dans le fichier JSON.

J’espère que je suis claire dans ce que j’explique.

Est-ce qu’une âme charitable serait en mesure de me pondre le code HTML à mettre dans le fichier existant ? J’utilise la base menuJsonFsb33Frame.

Fichier perso.json:

{
    "buttons": [
        {
            "link": "2",
            "icon": "montheme/menuJsonFsb33Frame/img/00_icon_menu_home.png",
            "footer": "12"
        },
        {
            "link": "3",
            "icon": "montheme/menuJsonFsb33Frame/img/01_icon_menu_volet_garage.png",
            "footer": "13"
        },
        {
            "link": "4",
            "icon": "montheme/menuJsonFsb33Frame/img/02_icon_menu_chauffage.png",
            "footer": "12"
        },
        {
            "link": "5",
            "icon": "montheme/menuJsonFsb33Frame/img/03_icon_menu_temp.png",
            "footer": "12"
        },
        {
            "link": "6",
            "icon": "montheme/menuJsonFsb33Frame/img/04_icon_menu_light.png",
            "footer": "14"
        },
        {
            "link": "7",
            "icon": "montheme/menuJsonFsb33Frame/img/05_icon_menu_piscine_jardin.png",
            "footer": "14"
        },
        {
            "link": "8",
            "icon": "montheme/menuJsonFsb33Frame/img/06_icon_menu_alarme.png",
            "footer": "14"
        },
        {
            "link": "9",
            "icon": "montheme/menuJsonFsb33Frame/img/07_icon_menu_info.png",
            "footer": "12"
        },
        {
            "link": "10",
            "icon": "montheme/menuJsonFsb33Frame/img/08_icon_menu_next_page.png",
            "footer": "12"
        }

    ],
    "parameters": {
        "menu_x": "1180px",
        "menu_y": "0px",
        "menu_width": "100px",
        "menu_height": "710px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "1180px",
        "content_height": "710px",
        "foot_x": "0px",
        "foot_y": "710px",
        "foot_width": "1280px",
        "foot_height": "90px"
    }
}

Merci pour votre aide.

Bruno.

Tu peux tester les modifications suivantes de index.html (non testé) :

ligne 24 :

return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer + ')">'

Fonction gotoPlan() :

	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;
			}
		}
	}

Merci infiniment @noodom. Je vais tester ça demain, je mettrais le résultat ici. J’ai les yeux qui se croisent :woozy_face:

Bonne nuit.

@noodom,

Je n’ai pas résisté à attendre demain :grinning:

Je viens de tester et cela fonctionne parfaitement. J’ai ajouté dans le HTML le code de récupération des paramètres de positionnement du frame menuFooter.

UN GRAND MERCI.

Bonne nuit.

Bonne nouvelle ! Merci de ton retour :slight_smile:

1 « J'aime »

Hello @noodom,

Je cherche à ajouter une fonction supplémentaire au menu menuJsonFsb33Frame. Dans mon JSON j’ai ajouté une data supplémentaire qui s’appelle « type » et qui peut prendre la valeur « frame » ou « page ». Suivant cette valeur, un click sur le bouton correspondant charge le design soit dans la frame ‹ menuFrame › soit en entier. Ceci me permet de mettre un bouton de navigation de page ‹ suivante › ou ‹ précédente ›. Pour la navigation, j’ai créé un deuxième fichier JSON qui sert de paramétrage à un deuxième design complet avec un deuxième équipement htmlDisplay pour le deuxième menu.
Je n’y arrive pas. Il faut dire que j’ai vraiment du mal à comprendre la logique de programmation de JQuerry et le HTML de l’équipement htmlDisplay du Menu.

Voici mon JSON et mon htmlDisplay du premier menu (sur le Menu 2, seuls les items et la référence au deuxième fichier JSON changent):

perso_home_01.json :

{
    "buttons": [
        {
            "link": "2",
            "icon": "montheme/menuJsonFsb33Frame/img/02_menu_accueil.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "3",
            "icon": "montheme/menuJsonFsb33Frame/img/03_menu_volets.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "4",
            "icon": "montheme/menuJsonFsb33Frame/img/04_menu_chauffage.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "5",
            "icon": "montheme/menuJsonFsb33Frame/img/05_menu_temp.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "6",
            "icon": "montheme/menuJsonFsb33Frame/img/06_menu_eclairages.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "7",
            "icon": "montheme/menuJsonFsb33Frame/img/07_menu_exterieurs.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "8",
            "icon": "montheme/menuJsonFsb33Frame/img/08_menu_energie.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "9",
            "icon": "montheme/menuJsonFsb33Frame/img/09_menu_alarme.png",
            "footer": "21",
          	"type": "frame"
        },
        {
            "link": "10",
            "icon": "montheme/menuJsonFsb33Frame/img/00_menu_next_page.png",
            "footer": "21",
          	"type": "page"
        }

    ],
    "parameters": {
        "menu_x": "1180px",
        "menu_y": "0px",
        "menu_width": "100px",
        "menu_height": "710px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "1180px",
        "content_height": "710px",
        "footer_x": "0px",
        "footer_y": "710px",
        "footer_width": "1280px",
        "footer_height": "90px"
    }
}

htmlDisplay Menu 1:

<!-- 
	@noodom / Menu menuJsonFsb33Frame : menu F$B33 avec gestion des boutons par fichier JSon et navigation par frame
	- reprise du menu F$B33 simplifié par @salvialf
	- ajout de la gestion des boutons par un paramétrage JSon
	- ajout de la navigation par frame à l'aide de htmlDisplay

Installation du menu : https://github.com/noodom/jeedom_menus/blob/master/menuJsonFsb33Frame/README.md

-->

<link href="montheme/menuJsonFsb33Frame/css/perso_vert.css" rel="stylesheet" type="text/css">

<div class="menu_top">
</div>

<script id="menuCreation-js">
	$(document).ready(function () {
		let menuTop = $('.menu_top');
		let link_id = (location.search.split('link_id' + '=')[1] || '').split('&')[0];
		menuTop.append('Chargement du menu..');

		$.getJSON('montheme/menuJsonFsb33Frame/json/perso_home_01.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);
			}

			if (data.parameters) {
				// menu parameters
				let htmlDisplayId = '[data-eqlogic_id="#id#"]';
				$(htmlDisplayId)[0].style.left = data.parameters.menu_x ? data.parameters.menu_x : "1180px";
				$(htmlDisplayId)[0].style.top = data.parameters.menu_y ? data.parameters.menu_y : "0px";
				$(htmlDisplayId)[0].style.width = data.parameters.menu_width ? data.parameters.menu_width : "100px";
				$(htmlDisplayId)[0].style.height = data.parameters.menu_height ? data.parameters.menu_height : "710px";

				// frame parameters
				$("#menuFrame").offsetParent().style().left = data.parameters.content_x ? data.parameters.content_x : "0px";
				$("#menuFrame").offsetParent().style().top = data.parameters.content_y ? data.parameters.content_y : "0px";
				$("#menuFrame").offsetParent().style().width = data.parameters.content_width ? data.parameters.content_width : "1180px";
				$("#menuFrame").offsetParent().style().height = data.parameters.content_height ? data.parameters.content_height : "710px";

              // footer frame parameters
				$("#menuFooter").offsetParent().style().left = data.parameters.footer_x ? data.parameters.footer_x : "0px";
				$("#menuFooter").offsetParent().style().top = data.parameters.footer_y ? data.parameters.footer_y : "0px";
				$("#menuFooter").offsetParent().style().width = data.parameters.footer_width ? data.parameters.footer_width : "1180px";
				$("#menuFooter").offsetParent().style().height = data.parameters.footer_height ? data.parameters.footer_height : "710px";
			}

			let frameDestination = document.getElementById('menuFrame');
			if (frameDestination == null) {
				// no frame navigation : focus on button with url parameter plan_id as id
				let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
				$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
			}
			else {
				if (link_id == "") {
					// frame navigation : set focus on first button 
					$('#' + data.buttons[0].link + ' li').click();
				}
				else {
					// frame navigation : goto design id (url parameter link_id)
					gotoPlan(link_id);
				}
			}
		});
	});

	// create url destination
	function getUrlDestination(urlParam) {
		if (isNaN(urlParam)) {
			return urlParam;
		} else {
			return 'index.php?v=d&p=plan&plan_id=' + urlParam + '&fullscreen=1';
		}
	}
  
 	// menu redirection
  	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>

Est-ce que tu pourrais y jeter un oeil et m’aider ?

Je te remercie beaucoup.

Bruno.

Pas simple je suis sur mobile, mais tu peux tester ça :

return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer +  ','  + button.type + ')">'

ET

function gotoPlan(id, idFooter, typeLink) {
if (frameDestination == null || typeLink == "page") {

Bonjour à tous

je suis un peu HS, mais c’est juste pour passer l’information, j’utilisais le menu de F$B33, que j’avais aussi un peu modifié pour centraliser le code et les CSS

Mais depuis la sortie du plugin HMTLDISLAY, c’est encore plus simple
il suffit de créer un équipement, avec un code pour la partie Dashbord et un autre éventuellement pour la partie Mobile, cela peut se mettre très facilement sur un Design

perso, j’utilise un code trouvé sur la communauté, désolé j’ai oublié son créateur :slight_smile:

il prend pas de place et se déroule au touché

1 « J'aime »

Hello @noodom,

Je viens de passer une petite heure dessus, marche pas. J’avais essayé exactement la même chose hier avant de te recontacter.

Le fait d’ajouter ,’ + button.type + ’ au htmlDisplay casse l’affichage du design. J’ai une erreur qui s’affiche dans un Triangle d’attention dans la barre de menu de Jeedom et le contenu indique:

fichier: https://mon.site/index.php?v=d&p=plan&plan_id=1
ligne: 1
message: Uncaught ReferenceError: caca is not defined|

A chaque click sur un bouton, j’ai un message supplémentaire qui s’affiche. J’ai mis exprès des mots pipi caca pour mieux comprendre le message.

Au chargement du design, comme le premier bouton est automatiquement sollicité, j’ai un premier message. les iFrames restent vide. A chaque click sur un bouton, les iFrames restent toujours vide et une ligne d’erreur s’ajoute au message avec le type correspondant au bouton clické.

Mon fichier JSON:

{
    "buttons": [
        {
            "link": "2",
            "icon": "montheme/menuJsonFsb33Frame/img/02_menu_accueil.png",
            "footer": "21",
          	"type": "caca"
        },
        {
            "link": "3",
            "icon": "montheme/menuJsonFsb33Frame/img/03_menu_volets.png",
            "footer": "21",
          	"type": "pipi"
        },
        {
            "link": "4",
            "icon": "montheme/menuJsonFsb33Frame/img/04_menu_chauffage.png",
            "footer": "21",
          	"type": "popo"
        },
        {
            "link": "5",
            "icon": "montheme/menuJsonFsb33Frame/img/05_menu_temp.png",
            "footer": "21",
          	"type": "pupu"
        },
        {
            "link": "6",
            "icon": "montheme/menuJsonFsb33Frame/img/06_menu_eclairages.png",
            "footer": "21",
          	"type": "papa"
        },
        {
            "link": "7",
            "icon": "montheme/menuJsonFsb33Frame/img/07_menu_exterieurs.png",
            "footer": "21",
          	"type": "pqpq"
        },
        {
            "link": "8",
            "icon": "montheme/menuJsonFsb33Frame/img/08_menu_energie.png",
            "footer": "21",
          	"type": "pepe"
        },
        {
            "link": "9",
            "icon": "montheme/menuJsonFsb33Frame/img/09_menu_alarme.png",
            "footer": "21",
          	"type": "pypy"
        },
        {
            "link": "10",
            "icon": "montheme/menuJsonFsb33Frame/img/00_menu_next_page.png",
            "footer": "21",
          	"type": "page"
        }

    ],
    "parameters": {
        "menu_x": "1180px",
        "menu_y": "0px",
        "menu_width": "100px",
        "menu_height": "710px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "1180px",
        "content_height": "710px",
        "footer_x": "0px",
        "footer_y": "710px",
        "footer_width": "1280px",
        "footer_height": "90px"
    }
}

Mon fichier htlmDisplay Menu:

<!-- 
	@noodom / Menu menuJsonFsb33Frame : menu F$B33 avec gestion des boutons par fichier JSon et navigation par frame
	- reprise du menu F$B33 simplifié par @salvialf
	- ajout de la gestion des boutons par un paramétrage JSon
	- ajout de la navigation par frame à l'aide de htmlDisplay

Installation du menu : https://github.com/noodom/jeedom_menus/blob/master/menuJsonFsb33Frame/README.md

-->

<link href="montheme/menuJsonFsb33Frame/css/perso_vert.css" rel="stylesheet" type="text/css">

<div class="menu_top">
</div>

<script id="menuCreation-js">
	$(document).ready(function () {
		let menuTop = $('.menu_top');
		let link_id = (location.search.split('link_id' + '=')[1] || '').split('&')[0];
		menuTop.append('Chargement du menu..');

		$.getJSON('montheme/menuJsonFsb33Frame/json/perso_home_01.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 + ',' + button.type + ')">'
				     + '<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);
			}

			if (data.parameters) {
				// menu parameters
				let htmlDisplayId = '[data-eqlogic_id="#id#"]';
				$(htmlDisplayId)[0].style.left = data.parameters.menu_x ? data.parameters.menu_x : "1180px";
				$(htmlDisplayId)[0].style.top = data.parameters.menu_y ? data.parameters.menu_y : "0px";
				$(htmlDisplayId)[0].style.width = data.parameters.menu_width ? data.parameters.menu_width : "100px";
				$(htmlDisplayId)[0].style.height = data.parameters.menu_height ? data.parameters.menu_height : "710px";

				// frame parameters
				$("#menuFrame").offsetParent().style().left = data.parameters.content_x ? data.parameters.content_x : "0px";
				$("#menuFrame").offsetParent().style().top = data.parameters.content_y ? data.parameters.content_y : "0px";
				$("#menuFrame").offsetParent().style().width = data.parameters.content_width ? data.parameters.content_width : "1180px";
				$("#menuFrame").offsetParent().style().height = data.parameters.content_height ? data.parameters.content_height : "710px";

              // footer frame parameters
				$("#menuFooter").offsetParent().style().left = data.parameters.footer_x ? data.parameters.footer_x : "0px";
				$("#menuFooter").offsetParent().style().top = data.parameters.footer_y ? data.parameters.footer_y : "0px";
				$("#menuFooter").offsetParent().style().width = data.parameters.footer_width ? data.parameters.footer_width : "1180px";
				$("#menuFooter").offsetParent().style().height = data.parameters.footer_height ? data.parameters.footer_height : "710px";
			}

			let frameDestination = document.getElementById('menuFrame');
			if (frameDestination == null) {
				// no frame navigation : focus on button with url parameter plan_id as id
				let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
				$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
			}
			else {
				if (link_id == "") {
					// frame navigation : set focus on first button 
					$('#' + data.buttons[0].link + ' li').click();
				}
				else {
					// frame navigation : goto design id (url parameter link_id)
					gotoPlan(link_id);
				}
			}
		});
	});

	// create url destination
	function getUrlDestination(urlParam) {
		if (isNaN(urlParam)) {
			return urlParam;
		} else {
			return 'index.php?v=d&p=plan&plan_id=' + urlParam + '&fullscreen=1';
		}
	}
  
 	// menu redirection
  	function gotoPlan(id, idFooter, typeLink) {
		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 || typeLink == "page") {
			// 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>

Merci pour ton aide.

type doit être comme un mot-clé.
Essaie avec un autre mot-clé : redirection par exemple.

Pas mieux.

JSON:

{
    "buttons": [
        {
            "link": "2",
            "icon": "montheme/menuJsonFsb33Frame/img/02_menu_accueil.png",
            "footer": "21",
          	"lien": "caca"
        },
        {
            "link": "3",
            "icon": "montheme/menuJsonFsb33Frame/img/03_menu_volets.png",
            "footer": "21",
          	"lien": "pipi"
        },
        {
            "link": "4",
            "icon": "montheme/menuJsonFsb33Frame/img/04_menu_chauffage.png",
            "footer": "21",
          	"lien": "popo"
        },
        {
            "link": "5",
            "icon": "montheme/menuJsonFsb33Frame/img/05_menu_temp.png",
            "footer": "21",
          	"lien": "pupu"
        },
        {
            "link": "6",
            "icon": "montheme/menuJsonFsb33Frame/img/06_menu_eclairages.png",
            "footer": "21",
          	"lien": "papa"
        },
        {
            "link": "7",
            "icon": "montheme/menuJsonFsb33Frame/img/07_menu_exterieurs.png",
            "footer": "21",
          	"lien": "pqpq"
        },
        {
            "link": "8",
            "icon": "montheme/menuJsonFsb33Frame/img/08_menu_energie.png",
            "footer": "21",
          	"lien": "pepe"
        },
        {
            "link": "9",
            "icon": "montheme/menuJsonFsb33Frame/img/09_menu_alarme.png",
            "footer": "21",
          	"lien": "pypy"
        },
        {
            "link": "10",
            "icon": "montheme/menuJsonFsb33Frame/img/00_menu_next_page.png",
            "footer": "21",
          	"lien": "page"
        }

    ],
    "parameters": {
        "menu_x": "1180px",
        "menu_y": "0px",
        "menu_width": "100px",
        "menu_height": "710px",
        "content_x": "0px",
        "content_y": "0px",
        "content_width": "1180px",
        "content_height": "710px",
        "footer_x": "0px",
        "footer_y": "710px",
        "footer_width": "1280px",
        "footer_height": "90px"
    }
}

htmlDisplay Menu:

<!-- 
	@noodom / Menu menuJsonFsb33Frame : menu F$B33 avec gestion des boutons par fichier JSon et navigation par frame
	- reprise du menu F$B33 simplifié par @salvialf
	- ajout de la gestion des boutons par un paramétrage JSon
	- ajout de la navigation par frame à l'aide de htmlDisplay

Installation du menu : https://github.com/noodom/jeedom_menus/blob/master/menuJsonFsb33Frame/README.md

-->

<link href="montheme/menuJsonFsb33Frame/css/perso_vert.css" rel="stylesheet" type="text/css">

<div class="menu_top">
</div>

<script id="menuCreation-js">
	$(document).ready(function () {
		let menuTop = $('.menu_top');
		let link_id = (location.search.split('link_id' + '=')[1] || '').split('&')[0];
		menuTop.append('Chargement du menu..');

		$.getJSON('montheme/menuJsonFsb33Frame/json/perso_home_01.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 + ',' + button.lien + ')">'
				     + '<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);
			}

			if (data.parameters) {
				// menu parameters
				let htmlDisplayId = '[data-eqlogic_id="#id#"]';
				$(htmlDisplayId)[0].style.left = data.parameters.menu_x ? data.parameters.menu_x : "1180px";
				$(htmlDisplayId)[0].style.top = data.parameters.menu_y ? data.parameters.menu_y : "0px";
				$(htmlDisplayId)[0].style.width = data.parameters.menu_width ? data.parameters.menu_width : "100px";
				$(htmlDisplayId)[0].style.height = data.parameters.menu_height ? data.parameters.menu_height : "710px";

				// frame parameters
				$("#menuFrame").offsetParent().style().left = data.parameters.content_x ? data.parameters.content_x : "0px";
				$("#menuFrame").offsetParent().style().top = data.parameters.content_y ? data.parameters.content_y : "0px";
				$("#menuFrame").offsetParent().style().width = data.parameters.content_width ? data.parameters.content_width : "1180px";
				$("#menuFrame").offsetParent().style().height = data.parameters.content_height ? data.parameters.content_height : "710px";

              // footer frame parameters
				$("#menuFooter").offsetParent().style().left = data.parameters.footer_x ? data.parameters.footer_x : "0px";
				$("#menuFooter").offsetParent().style().top = data.parameters.footer_y ? data.parameters.footer_y : "0px";
				$("#menuFooter").offsetParent().style().width = data.parameters.footer_width ? data.parameters.footer_width : "1180px";
				$("#menuFooter").offsetParent().style().height = data.parameters.footer_height ? data.parameters.footer_height : "710px";
			}

			let frameDestination = document.getElementById('menuFrame');
			if (frameDestination == null) {
				// no frame navigation : focus on button with url parameter plan_id as id
				let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
				$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
			}
			else {
				if (link_id == "") {
					// frame navigation : set focus on first button 
					$('#' + data.buttons[0].link + ' li').click();
				}
				else {
					// frame navigation : goto design id (url parameter link_id)
					gotoPlan(link_id);
				}
			}
		});
	});

	// create url destination
	function getUrlDestination(urlParam) {
		if (isNaN(urlParam)) {
			return urlParam;
		} else {
			return 'index.php?v=d&p=plan&plan_id=' + urlParam + '&fullscreen=1';
		}
	}
  
 	// menu redirection
  	function gotoPlan(id, idFooter, modeLink) {
		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 || modeLink == "page") {
			// 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>

Ne faut-il pas modifier aussi cette partie ?

let frameDestination = document.getElementById('menuFrame');
			if (frameDestination == null) {
				// no frame navigation : focus on button with url parameter plan_id as id
				let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
				$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
			}
			else {
				if (link_id == "") {
					// frame navigation : set focus on first button 
					$('#' + data.buttons[0].link + ' li').click();
				}
				else {
					// frame navigation : goto design id (url parameter link_id)
					gotoPlan(link_id);

En fait, il cherche à interpréter le paramètre, il faut juste le passer comme une chaine de caractères.
Tu peux essayer ça :

return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer + ',"' + button.lien + '")">'

Pas mieux, le message d’erreur change:

Uncaught SyntaxError: Unexpected end of input

@noBru77 on s’écarte du post initial avec de multiples évolutions pour tes besoins spécifiques (mais qui pourront servir à d’autres évidemment), j’ai donc créé un nouveau post pour la suite :

Ces fonctionnalités pourront être à terme être ajoutées au menu initial mais ça demandera de passer plus de temps pour blinder le code avant de le proposer ici.

HS je sais pas, mais c’est surtout la solution proposée ici :upside_down_face: :

  • code et CSS séparés
  • utilisation de htmlDisplay
  • et en bonus la gestion par frame et la configuration json :slight_smile:

Je t’invite à lire la documentation de ce menu lié à ce post :wink:

Pour le menu que tu proposes, je propose un autre menu similaire :

Des évolutions sont en cours pour proposer une ouverture horizontale/verticale, direction gauche/droite, ou direction haut/bas

1 « J'aime »

C’est noté @noodom . En tout cas merci à toi pour ta disponibilité.

Pour ceux qui voudraient suivre et tester les dernières évolutions, la dernière modification est la suivante :

return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer +  ',\''  + button.type + '\')">'

(Attention, ',\'' ne contient que des simple quotes et pas des guillemets !)

Bonjour @noodom

Merci pour tout ce boulot !! Je viens de passer en V4 et donc je me relance dans mes designs !
Je tente de mettre en place le menu Animation, j’ai donc créé un design Accueil_Design dans lequel j’ai placé mon HTMLDisplay Menu, puis mon HTMLDisplay Contenu. Ensuite j’ai créé un Design par rubrique présente dans mon menu, puis j’ai mis à jour le perso.json en conséquence.
Mon probleme est que lorsque je lance mon AccueilDesign, le menu est tout de suite masqué par la premiere page de mon menu…Comment faire pour eviter celà ? Mon HTMLDisplay est pourtant bien positionné sous mon HTMLDIsplay Menu…

Merci pour ton aide !

Bon je viens de répondre à ton post précédent :slightly_smiling_face:
Je vois que la suite est présente ici.

Attention à bien ajouter le htmlDisplay contenu AVANT le htmlDisplay menu car ça peut poser des problèmes de chargement automatique dans la frame de contenu encore non existantes.

Sinon, tu as bien modifié le zindex de ton htmlDisplay menu ?

C’est good ! ca fonctionne ! effectivement, j’insérais le menu en premier…là ca fonctionne mieux ! Merci !