Element actif sur menu du plugin htmlDisplay

Salut,

Suite à plusieurs demandes pour intégrer la sélection de la page en cours sur les designs avec le plugin HtmlDisplay, je me suis penché sur le sujet.


J’ai adapté le menu de f$b33 avec une fonction javascript pour ajouter la classe selected (éventuellement à remplacer par le nom de la classe concernée).
Le numéro d’id de chaque élément du menu correspond au numéro d’id de la page du design concerné et est donc à renseigner.

Menu f$b33 modifié:

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu">
  <!-- id = N° d'ID du design à afficher -->
	<a id="1" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

	<a id="5" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

	<a id="6" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_thermometre.png" height=50px width=50px></div></br></li></a>

	<a id="7" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_alarme.png" height=50px width=50px></div></br></li></a>

	<a id="11" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cast.png" height=50px width=50px></div></br></li></a>

	<a id="9" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_plante.png" height=50px width=50px></div></br></li></a>

	<a id="10" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_consomation.png" height=50px width=50px></div></br></li></a>

</ul>
</div>
<script>
   $(document).ready(function(){
    var planID = '#'+(location.search.split('plan_id' + '=')[1] || '').split('&')[0];
     $(planID+' li').addClass('selected'); <!-- selected = classe CSS sur élément actif -->
   });
                     
function gotoPlan(planID) {
     planHeader_id=planID;
  	 displayPlan();
    }
</script>

Je vous invite à tester et à me faire vos retours.

1 J'aime

Merci :kissing_heart:

C’est pour le menu vertical ?
Car mon rendu n’est que vertical avec html display…

De mon coté je n’ai pas l’impression que la class de surbrillance fonctionne :thinking:
Mais c’est certain que je me loupe quelque part…

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">
  
<div class="menu_top">
  
   <!-- id = N° d'ID du design à afficher -->
    <a id="1" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px/></div></a>

	<a id="5" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px/></div></a>
  
  	<a id="6" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_thermometre.png" height=50px width=50px/></div></a>
  
  	<a id="7" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_alarme.png" height=50px width=50px/></div></a>
  
  	<a id="11" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_cast.png" height=50px width=50px/></div></a>
  
  	<a id="9" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_plante.png" height=50px width=50px/></div></a>
  
  	<a id="10" onClick="gotoPlan(this.id)" class="monmenu"><div class="imagette"><img src="montheme/images/icon_consomation.png" height=50px width=50px/></div></a>

</div>

<script>
   $(document).ready(function(){
    var planID = '#'+(location.search.split('plan_id' + '=')[1] || '').split('&')[0];
     $(planID).addClass('selected'); <!-- selected = classe CSS sur élément actif -->
   });
                     
function gotoPlan(planID) {
     planHeader_id=planID;
  	 displayPlan();
    }
</script>

perso.css.txt (1,1 Ko)

Et voila le code html d’origine :

<!--

Menu

Exemple : 

- Copiez perso.css dans montheme/
- Copiez les images dans montheme/images
- Dans le mode Design, ajoutez "Texte/html" puis copier/coller le code html
- Remplacez "ID DU PLAN" par l'ID de votre page cible.

la class "selected" permet de mettre en surbrillance le bouton du menu sur lequel vous êtes

-->


<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu">



	<a onClick="planHeader_id=1; displayPlan();"><li class="selected"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=5; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=6; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_thermometre.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=7; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_alarme.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=11; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cast.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=9; displayPlan();"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_plante.png" height=50px width=50px></div></br></li></a>

	<a onClick="planHeader_id=10; displayPlan();"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_consomation.png" height=50px width=50px></div></br></li></a>



</ul>


</div>

Salut @Theking31,

Merci pour la remontée :slight_smile: Tu ne te loupes pas, mon menu est trop éloigné de celui d’origine. J’ai repris mon exemple avec ton menu du coup :wink:

Ce code devrait être mieux dans ton cas:

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu">
  <!-- id = N° d'ID du design à afficher -->
	<a id="1" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

	<a id="5" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

	<a id="6" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_thermometre.png" height=50px width=50px></div></br></li></a>

	<a id="7" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_alarme.png" height=50px width=50px></div></br></li></a>

	<a id="11" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cast.png" height=50px width=50px></div></br></li></a>

	<a id="9" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_plante.png" height=50px width=50px></div></br></li></a>

	<a id="10" onClick="gotoPlan(this.id)"><li class="monmenu" ><div class="imagette"><img src="montheme/images/icon_consomation.png" height=50px width=50px></div></br></li></a>

</ul>
</div>
<script>
   $(document).ready(function(){
    var planID = '#'+(location.search.split('plan_id' + '=')[1] || '').split('&')[0];
     $(planID+' li').addClass('selected'); <!-- selected = classe CSS sur élément actif -->
   });
                     
function gotoPlan(planID) {
     planHeader_id=planID;
  	 displayPlan();
    }
</script>

C’est good ???

C’EST… parfait :+1:

Merci, ca va vraiment simplifier ce menu

PS : pour les autres => ligne 17 il y a " en trop

1 J'aime

Je l’avais déjà enlevé sur le 1er post mais j’avais oublié celui-ci… c’est corrigé :wink:

Ca marche au top encore merci @Salvialf

1 J'aime

Ahhh !!! C’est parfait, c’était assez lourd de devoir passer sur toutes les pages quand on voulait faire une modification. Et là avec l’auto select en plus c’est nickel.
Merci à toi

Salut,
Chez moi, l’icone passe bien en "selected "mais il n’apparaît pas en surbrillance.
L’image reste grisée.
Je n’ai donc pas le même comportement si je note directement selected pour la class

Salut,

Dans ton code CSS tu dois avoir une classe selected ou active par exemple… il faut mettre le nom de la classe qui doit être appliqué pour indiquer la page en cours

Merci pour ton retour rapide !
Dans ma feuille de style « perso.css », il y a bien une opacité à 0.5 pour la classe « div.imagette » qui ecrasse le style de du « li »

J’ai donc ajouté dans ton code
$(planID+’ div’).addClass(‹ selected ›);
pour changer la class du div.

Slt moi aussi je ne retrouve que le menu vertical comment faire pour l’avoir en horizontal
autrement ce n’est pas mal du tout

Bonjour @Myrmex88

pour cela il te faut ajouter le css suivant dans le répertoire montheme en enlevent le .txt perso.css.txt (1,3 Ko)

Bonjour,
dans quel dossier faut-il positionner ce fichier ?
est-ce bien ici ?
image
Merci de votre aide.

Bonsoir,

non dans /var/wwww/html/montheme avec jeeXplorer

si il te manque des images pour certain bouton tu les trouvera là
https://forum.jeedom.com/viewtopic.php?f=50&t=14863&start=60#p274114

Merci, superbe. Beau travail.

1 J'aime

Bonsoir,

Étant assez allergique à jQuery, je me permet de vous proposer une version ES6 (qui peut ne pas être parfaite)

HTML

<link href="montheme/css/perso.css" rel="stylesheet" type="text/css">
<div class="menu_top">
	<ul class="monmenu">
      <!-- data-plan = N° d'ID, préfixé d'un "e", du design à afficher: ex plan N° 10 : data-plan="e10" -->
      <li class="monmenu"><a class="entry" data-plan="e1" href="#"><div class="imagette"><img src="jTheme/images/home.png" height=50px width=50px></div></a></li>
      <!-- https://www.iconexperience.com/o_collection/icons/?icon=home -->
      <li class="monmenu"><a class="entry" data-plan="e2" href="#"><div class="imagette"><img src="jTheme/images/webcam.png" height=50px width=50px></div></a></li>
      <!-- https://www.iconexperience.com/o_collection/search/?q=camera -->
      <li class="monmenu"><a class="entry" data-plan="e3" href="#"><div class="imagette"><img src="jTheme/images/map.png" height=50px width=50px></div></a></li>
      <!-- https://www.iconexperience.com/o_collection/search/?q=map -->
   </ul>
</div>
<script src="montheme/js/menu.js" defer></script>

montheme/js/menu.js

setTimeout(() => {
  let url = new URL(window.location)
  let search = new URLSearchParams(url.search)

  let planId = search.get('plan_id') || ''
  document.querySelector('[data-plan=e' + planId + '] li').classList.add('selected')
}, 0)


Array.from(document.querySelectorAll('.entry')).forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault()

    let planId = e.target.closest('a').dataset.plan
    planHeader_id = planId.replace('e', '')
    displayPlan()
  })
})

Il y a quelques modifications du HTML, mais je pense être rester relativement simple.

EDIT: Corrections xHTML