Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020 (Si community a bien pris le relais) puis nous le fermerons définitivement en janvier 2021./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 11 oct. 2019, 01:29

si tu veux un fond interractif

crée un virtuel info autre
des actions avec pour valeur soit le http d'une image
soit le lien

exemple
1 = https://img.bfmtv.com/c/1000/600/bdd/f7 ... b0953.jpeg
2 = https://upload.wikimedia.org/wikipedia/ ... G_2653.jpg
3 = /core/img/logo-jeedom-grand-nom-couleur.svg

une fois confirmé que tu as bien cette info qui apparait

mets le code dans l'info autre

j'affiche l'image soit via css (que tu as fait) soit img
à toi de garder via toutes les possibilités se qui t'interesse
ou pas

ensuite tu le mets dans ton design corp
soit dans une partie que tu n'utilises pas soit en le déplacant du chant position x = 110

le plus important c'est #section1 tu vas voir il est fixe donc ne bouge pas
$('#section1').css('background','url('+_options.display_value+') no-repeat fixed').css('background-size','cover');


pour l'avoir pour toutes les sections
comme sur le dégradé css plus haut
un id par dessus les autres (*)

de quoi t'amuser

Code : Tout sélectionner

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
<style>
 [data-cmd_id='#id#'] .cover {
  height: 300px;
  width: 200px;
   }


  </style>
  <center><span style="font-size : 12px;#hideCmdName#" class="cmdName">#name_display#</span>

        <div class="cover"></div>
    <br/>
    <div class="img"></div>
              </center>
  
	<script>
		jeedom.cmd.update['#id#'] = function(_options){

$('.cmd[data-cmd_id=#id#] .cover').css('background','url('+_options.display_value+') no-repeat center').css('background-size','cover')
;
/* methode img */

$('.cmd[data-cmd_id=#id#] .img').html('<img src='+_options.display_value+' height=300px width=200px >');                    
          
$('#section1').css('background','url('+_options.display_value+') no-repeat fixed').css('background-size','cover');
          /* image full écran = déformé
         $('#section1').css('background','url('+_options.display_value+') no-repeat').css('background-size','360px 650px');
          */
      if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
selon le design corp menu tu auras un rendu différent aussi


(*)
------ // 1

j'ajoute un div section qui englobe tous les autres section1,2,...

<div id="section">
<!-- navbar-fixed-top -->
<div id="section1" class="container-fluid">
<h3 style="margin-left: 35px;">Résumés</h3>
</div>
....
....
</div> // pour la fin

----- // 2
dans le css
#section {
color: #fff;
}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10,
#section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20
{padding-top:0px;height:630px;}

remplace toutes les id #section1,2

--------- // 3
dans le code plus haut du widget je modifie #section1 par #section
vide le cache
et te voila avec une image fixe que tu peux sénarisé ou ajout d'autre image en valeur action
Pièces jointes
Sans titre.png
Sans titre.png (351.98 Kio) Consulté 142 fois

guims78
Timide
Messages : 495
Inscription : 30 sept. 2017, 13:00

Re: [tuto] Design - menu slide - corps scroll

Message par guims78 » 11 oct. 2019, 11:03

Merci Winhex pour toutes ces explications et du temps passé.
Je vais essayé de digérer tout ça. ;-)

Est-ce que c'est une façon de contourner l'utilisation du widget de changement de backgound dynamique pour l'utiliser avec les menus slide ?

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

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 11 oct. 2019, 15:57

exactement !
de se que j'ai compris des possibilités du plug.
(ex peut on joindre un lien externe https ? je pense au lien d'une caméra public avec ca)

guims78
Timide
Messages : 495
Inscription : 30 sept. 2017, 13:00

Re: [tuto] Design - menu slide - corps scroll

Message par guims78 » 11 oct. 2019, 18:11

Je suis Nul !!
déjà sur le virtuel, je n'arrive pas à afficher une image.
Capture d’écran 2019-10-11 à 18.11.01.png
Capture d’écran 2019-10-11 à 18.11.01.png (126.57 Kio) Consulté 107 fois
ce qui donne :
Capture d’écran 2019-10-11 à 18.12.12.png
Capture d’écran 2019-10-11 à 18.12.12.png (18.12 Kio) Consulté 107 fois

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

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 11 oct. 2019, 19:47

tu as réalisé la 1er partie
afficher le lien en valeur

créé en utilisant les liens que j'ai mis
et ensuite tu modifieras

fais un backup au cas où avant

pour aide :
la suite création de widget
si besoin je te fais une video

guims78
Timide
Messages : 495
Inscription : 30 sept. 2017, 13:00

Re: [tuto] Design - menu slide - corps scroll

Message par guims78 » 12 oct. 2019, 22:24

Ok mais comment faire pour afficher une image stocker en interne ??

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

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 12 oct. 2019, 23:14

le.bouton 3 de mon exemple est l'icône jeedom (interne)
au lieu de /core/img/...
ton lien

guims78
Timide
Messages : 495
Inscription : 30 sept. 2017, 13:00

Re: [tuto] Design - menu slide - corps scroll

Message par guims78 » 13 oct. 2019, 10:34

C'est ce que je fais, mais au lieu d'afficher l'image, mon virtuel affiche le lien ! Je loupe un truc mais quoi ?

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

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 13 oct. 2019, 10:48

créé un widget (le code)
l'assigne à l'info
exemple pour du numérique là
https://youtu.be/dAEL_Zz7y9I

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

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