Element actif sur menu du plugin htmlDisplay

Salvialf · Mars 9, 2020, 10:54

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.

Theking31 · Mars 9, 2020, 11:38

Merci

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

Salvialf · Mars 9, 2020, 12:06

Salut @Theking31,

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

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 ???

Theking31 · Mars 9, 2020, 2:39

C’EST… parfait

Merci, ca va vraiment simplifier ce menu

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

Salvialf · Mars 9, 2020, 2:41

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

tetiti20 · Mars 9, 2020, 6:53

Ca marche au top encore merci @Salvialf

Sinack · Mai 6, 2020, 2:34

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

lopezdav · Juillet 10, 2020, 3:12

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

Salvialf · Juillet 10, 2020, 3:25

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

lopezdav · Juillet 10, 2020, 4:03

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.

Myrmex88 · Juillet 10, 2020, 8:10

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

iPapy · Juillet 11, 2020, 4:20

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)

kikivertll · Juillet 13, 2020, 6:04

Bonjour,
dans quel dossier faut-il positionner ce fichier ?
est-ce bien ici ?

Merci de votre aide.

iPapy · Juillet 13, 2020, 6:13

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

kikivertll · Juillet 13, 2020, 6:47

Merci, superbe. Beau travail.

kl3sk · Septembre 18, 2020, 8:32

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

jahfly · Octobre 20, 2020, 8:44

Bonjour,

Ce menu est tout ce qui me faut pour finir mon design. Merci à vous pour le partage.
J ai bien mis le fichier perso.css là où il faut et rentré le code html mais le menu apprêt en horizontal et un peu trop long.
Comment puis je l avoir en vertical et le raccourcir.
Quelle ligne faut il que je change dans mon fichier perso.css.
Je n ai pas trop de connaissance html.
Merci de votre aide.

nitrogramme · Décembre 20, 2020, 1:41

Bonjour, super le partage mais malheureusement je n’arrive pas à avoir la surbrillance. Si vous avez trouvé une solution je suis preneur

nitrogramme · Décembre 21, 2020, 3:49

je partage la solution que j’ai trouvé

<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="9" onClick="gotoPlan(this.id)"><li class="monmenu"><div class="imagette"><img src="montheme/images/MAISON2.png" height=80px width=80px></div></br></li></a>

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

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

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

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

	

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

Salvialf · Décembre 21, 2020, 4:36

Salut,

Tu as juste ajouté la classe bouton au final. C’est donc plutôt le CSS qui aurait du être adapté semble t’il…

Element actif sur menu du plugin htmlDisplay

Menu f$b33 modifié:

Menu `f$b33` modifié: