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 !

[tuto] slide dans un design

Réservé à l'utilisation et la création des objets virtuels dans JEEDOM
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

[tuto] slide dans un design

Message par winhex » 08 mai 2019, 21:51

si vous voulez essayé

vidéo https://youtu.be/riRlEJxTWuU

un slide equipements droite/gauche sur mobile
sur pc faut clic et ensuite les fleches du clavier

je tourne avec un vieux jeedom (message suivant pour une version jeedom recente)
20190508_213414.jpg
20190508_213414.jpg (64.46 Kio) Consulté 1477 fois
se qui permet de le faire dans un design
Screenshot_20190508-213722_Chrome.jpg
Screenshot_20190508-213722_Chrome.jpg (95.92 Kio) Consulté 1477 fois
d'abord un tableau
1 ligne 6 colonnes
ensuite
parametres optionnels sur la tuile.png
parametres optionnels sur la tuile.png (70.87 Kio) Consulté 1470 fois
un style
display:flex;width:360px;height:180px;overflow:auto;
Dernière édition par winhex le 14 mai 2019, 16:01, édité 8 fois.

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: swap équipement pour mobile

Message par winhex » 08 mai 2019, 22:03

je ne sais pas la personnalisation avancé (sous configuration) existera toujours alors on va procédé differement

je supprime se qui précède (hormis le tableau)
on va dans le design
swap data plan.png
swap data plan.png (96.05 Kio) Consulté 1469 fois
on recherche le data-plan_id
chaque elements d'un design posséde un data plan
f12 / icône du bas à gauche / on balade la souris sur l'équipement / le data plan id et à la fin d'une balise precedente
data plan.png
data plan.png (116.77 Kio) Consulté 1469 fois
dans un html existant ou crée pour l'occasion
dans une balise style "css"

Code : Tout sélectionner

<style>
 [data-plan_id="707"] { 
   display:flex;width:360px;height:180px;overflow:auto;
         }
         </style>
ou on pourrait le mettre dans un script aussi

Code : Tout sélectionner

var Temperatures = $('[data-plan_id="707"]');     
             $( document ).ready(function() {
Temperatures.css('display','flex').css('height','180px').css('overflow','auto').css('width','360px');          
         }
pour cacher la barre de défilement sous chrome Android en style

::-webkit-scrollbar {
display: none;
}
etant un tableau c'est assez facile d'ajouter une ligne consigne (height:280px)
slide.png
slide.png (50.6 Kio) Consulté 1436 fois
maintenant si on voulait faire un bouton qui slide
overflow invisible et un scroolto en script
je vous laisse cherché vous avez les bases (de toutes manières je vais le faire pour mes VR mais je n'y suis pas encore)

HS
mon design (la base)
chaque menu vert un design différent
tous les équipements s'affiche et un hide pour chacun hormis se que je veux voir en accès
si je clic sur températures
tous les équipement se cache hide
et show pour ceux que je veux voir
afin d'éviter de tous voir un bref moment lors de l'accès
un html blanc qui disparaît une fois la page construite

lien pour la sonde
viewtopic.php?f=29&t=44352

lien avec les menus
viewtopic.php?f=24&t=45317&p=730401#p730401
Dernière édition par winhex le 25 mai 2019, 13:03, édité 1 fois.

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] slide dans un design

Message par winhex » 25 mai 2019, 10:09

dans un design un html "slide" sur un de nos logs
Screenshot_20190525-102606_Chrome.jpg
Screenshot_20190525-102606_Chrome.jpg (161.45 Kio) Consulté 1333 fois
Screenshot_20190525-094455_Chrome.jpg
Screenshot_20190525-094455_Chrome.jpg (119.35 Kio) Consulté 1349 fois

Code : Tout sélectionner

<div style="width:90%;height:80%;">
<a class="btn btn-warning pull-right" data-state="1" id="in_eventLogStopStart"><i class="fa fa-pause"></i> {{Pause}}</a>
<input class="form-control pull-right" id="in_eventLogSearch" style="width : 300px;" placeholder="{{Rechercher}}" />

      <pre id="pre_globallog" style="display: block;overflow: auto; width:100%;height:100%; font-size:0.9em;line-height: 0.9em;text-align:left !important;" class="pre_eventlog"></pre>

<script>
	jeedom.log.autoupdate({
		log : 'backup',
		display : $('.pre_eventlog'),
		search : $('#in_eventLogSearch'),
		control : $('#in_eventLogStopStart'),
	});
</script>
  </div>
auto actualisé,..

pour en créé un merci befa

tous ceux qui sont dans le dossier log ainssi que scénario fonctionne de la même manière

pour plusieurs dans le même design faudra changé les class / id pour chaque html (ou créé un imput list pointant sur différent log)

hs
le dossier log comporte un petit fichier .htaccess empêchant son accès d'une autre manière (lien, jquery,..)

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] slide dans un design

Message par winhex » 16 sept. 2019, 20:02

garder un scrollbar général et enlevé pour 1 overflow
dans un fichier texte/html

Code : Tout sélectionner

<script>
   $('[data-plan_id="927"]').css('overflow','auto');
  
</script>
<style>
[data-plan_id="927"]::-webkit-scrollbar {
   display: none; 
    }
</style>
voir la petite barre en haut à droite (général)
celle sous les sondes n'y est pas
Pièces jointes
Screenshot_20190916-195225_Chrome.jpg
Screenshot_20190916-195225_Chrome.jpg (493.85 Kio) Consulté 1100 fois

Répondre

Revenir vers « [Plugin officiel] Virtuels »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité