Design avec blocs dynamiques comme un menu déroulant

[ericklein]

Bonjour,

Je cherche le moyen de créer des blocs dynamiques. Par défaut ils sont fermés mais lorsqu'on clic dessus le bloc de développe et laisse apparaître un widget.

La partie création d'un bloc déroulant n'est pas un problème, la vraie question est comment mettre un widget complet ou une commande à l'intérieur de se bloc histoire que lorsqu'il soit fermés, rien ne s'affiche.

[Exemple]
Imaginez une icône d'ampoule, lorsqu'on clic dessus, le bloc de développe et laisse apparaître des fonctions de réglage de luminosité et un choix de différentes couleurs.

J'espère avoir été clair !
Merci d'avance !

[Swatmorpheus]

winhex est le champion de la bidouille des widgets , s'il passe par là mais c'est possible vu que c'est du html

[Bosquetia]

Oui une dropdownlist quoi
Pas évident de prime abord

[pascal]

Bonjour,

Pour info c'est ce que j'ai fait avec le widget décrit ici:
viewtopic.php?f=50&t=39477&p=648118#p648118

Tu peux configurer les images et le nombre d'images que tu veux.
Je l'utilise depuis un bon moment pour plusieurs widget et ca marche bien.
J'ai juste des petits pb de décalage par moment lorsque la liste est déplié. Je chercherais un peu plus tard.

Pascal

[winhex]

je ne mettrai qu'une info vu que tu veux plusieurs action si j'ai bien compris et comme tu sort d'une utilisation prévu

commence par créé en brut (sans script)
c'est ensuite la mise en place jeedom

en valeur tes équipements info,action
ton widget commence par séparé info et action
via leur position
var1 l'état
var2 action
...
placement de tes info dans les class défini
et tes action idem
clic sur bouton class x exécuté id (var2)

le widget convertie les équipements en id
il est facile d'exécuter un id

exemple avec une action liste
on y met valeur|nom normalement
si tu mets
equipement"action"|nom
en info tu aura #id# de l'équipement
une modif de l'original

var test1 = $(this).value();
test1=test1.replace(/#/g,'');
jeedom.cmd.execute({id: (test1)} );

une liste qui actionne

regarde les différent widget core
comment il procédé pour exécution (button,slider,..) selon ton besoin

pour les infos c'est pareil
viewtopic.php?f=50&t=1182&p=609307&hilit=meteo#p609307
---
tu as aussi moyen via méthode widget Xiaomi temp/humidité (en paramètre avancé )
en y glissant tes action pour ton cas
---
tu as aussi la méthode .closest qui consiste a remonté au parent de l'equipement pour y faire un .find pour mettre l'info en variable
et ensuite la caché
---
tu peux aller encore plus loin avec l'api js de jeedom (non documenté)

jeedom.cmd.byId({ id: #id#});

viewtopic.php?f=29&t=41594&p=680765&hil ... at#p678163


c'est se qu'on a dans les info de paramètre
d'une info tu as l'id
récupérer l'id de l'équipement
qui donne toutes les id des actions/info

mais c'est niveau pro là
---
tous ça pour te dire qu'il a plusieurs choix possible mais ça te prendra du temps

tous ça est la réflexion pour avoir un menu sidenav d'action/info (genre 1 design) et plusieurs sidenav, modal
https://www.w3schools.com/howto/howto_js_sidenav.asp

[ericklein]

Bonjour,

Merci pour ces réponses complètes, je vais étudier tout cela tranquillement ce week-end.
Je reviens vers vous pour vous informer de mon avancement et retour d'expérience.