Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Design avec blocs dynamiques comme un menu déroulant

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Avatar de l’utilisateur
ericklein
Timide
Messages : 16
Inscription : 13 sept. 2018, 15:26
Localisation : Strasbourg, Alsace, France

Design avec blocs dynamiques comme un menu déroulant

Message par ericklein » 28 févr. 2019, 13:38

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 !
Odroid C2 avec Debian 9 (Stretch) - eMMC 32 Go
1 clé USB Aeon Zwave Plus
1 clé USB Bluetooth 4.0
Eco Compteur Legrand
Pont Philips Hue 3ème génération (2 Hue White Ambiant + 4 Hue White & Color + 5 Dimmer Switch + 1 Motion Sensor)

Swatmorpheus
Actif
Messages : 919
Inscription : 23 avr. 2015, 14:38
Localisation : Haute Gironde

Re: Design avec blocs dynamiques comme un menu déroulant

Message par Swatmorpheus » 28 févr. 2019, 18:49

winhex est le champion de la bidouille des widgets , s'il passe par là mais c'est possible vu que c'est du html :)
Prod: jeedom V3.2.12 DIY RPI3 + Zwave (fibaro) + Zigbee (xiaomi) + IPXV4 + X4VR
AppleTV4k
PI3 : Max2play
PiZéro: PiCoreplayer
Mini+: OpenElec 7.0.1 Kodi 16.1 Jarvis
En préinstall pour migration: Nuc hystou ,ESXi6.7,jeedom V3.2.12, LMS ,Owncloud

Bosquetia
Actif
Messages : 6783
Inscription : 10 mai 2016, 07:54

Re: Design avec blocs dynamiques comme un menu déroulant

Message par Bosquetia » 28 févr. 2019, 20:07

Oui une dropdownlist quoi
Pas évident de prime abord

Avatar de l’utilisateur
pascal
Actif
Messages : 714
Inscription : 19 août 2014, 20:57
Contact :

Re: Design avec blocs dynamiques comme un menu déroulant

Message par pascal » 28 févr. 2019, 20:27

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
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Design avec blocs dynamiques comme un menu déroulant

Message par winhex » 28 févr. 2019, 21:24

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

Image
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

Avatar de l’utilisateur
ericklein
Timide
Messages : 16
Inscription : 13 sept. 2018, 15:26
Localisation : Strasbourg, Alsace, France

Re: Design avec blocs dynamiques comme un menu déroulant

Message par ericklein » 01 mars 2019, 08:57

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.
Odroid C2 avec Debian 9 (Stretch) - eMMC 32 Go
1 clé USB Aeon Zwave Plus
1 clé USB Bluetooth 4.0
Eco Compteur Legrand
Pont Philips Hue 3ème génération (2 Hue White Ambiant + 4 Hue White & Color + 5 Dimmer Switch + 1 Motion Sensor)

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités