PC SOFT

FOROS PROFESIONALES
WINDEV, WEBDEV y WINDEV Mobile

Inicio | Mensajes recientes | Conéctese... |  | Español FR
Inicio → WEBDEV 2024 → Toogle en composant web
Toogle en composant web
Iniciado por francois, 07,abr. 2017 17:08 - 19 respuestas
#1
Publicado el 07,abril 2017 - 17:08
Je souhaite utiliser un champ de type TOGGLE, récupéré sur http://www.cssflow.com/snippets/toggle-switches/demo
Code HTML extra simple, code CSS, mais pas de code JS.
HTML:
<div class="container">
<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view" value="form" id="form"><label for="form" class="switch-label switch-label-off">
Site de FORMATION
</label>
<input type="radio" class="switch-input" name="view" value="prod" id="prod" checked><label for="prod" class="switch-label switch-label-on">
Site de PRODUCTION
</label>
<span class="switch-selection"></span>
</div>
</div>

Question toute bête: comment récupérer la valeur du toggle à chaque clic?
#2
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 08,abril 2017 - 14:46
Oups! bonjour d'abord! Merci pour vos réponses...
#3
Publicado el 23,abril 2017 - 11:12
Bonjour François,

Je suis dans le même cas de figure.
Comment récupérer la valeur du switch lors d'un clic ?

Avez-vous trouvé une solution ou quelqu'un pourrait-il nous aider ?

Cordialement,

Christian.


francois avait prétendu :
Je souhaite utiliser un champ de type TOGGLE, récupéré sur
http://www.cssflow.com/snippets/toggle-switches/demo
Code HTML extra simple, code CSS, mais pas de code JS.
HTML:
<div class="container">
<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view" value="form"
id="form"><label for="form" class="switch-label switch-label-off">
Site de FORMATION
</label>
<input type="radio" class="switch-input" name="view" value="prod" id="prod"
checked><label for="prod" class="switch-label switch-label-on">
Site de PRODUCTION
</label>
<span class="switch-selection"></span>
</div>
</div>

Question toute bête: comment récupérer la valeur du toggle à chaque clic?
#4
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 24,abril 2017 - 13:41
Malheureusement, non. Comme on peut le voir sur ce fil, pas de réponse...:(
Mensaje modificado, 24,abril 2017 - 13:41
#5
Miembro registrado
950 mensajes
Popularité : +53 (63 votes)
Publicado el 24,abril 2017 - 14:43
Bonjour,

je pense qu'on peut s'aider de ce webinaire.



jordan
#6
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 24,abril 2017 - 22:05
Merci Jordan pour ton aide. Oui je l'ai bien visionné, mais le composant utilisé dans ce webinaire a déjà du code JS, et il est facile de comprendre comment interagir. Sur le composant que je souhaite utiliser, il n'y a aucun code JS. Que du code HTML + CSS.
#7
Miembro registrado
950 mensajes
Popularité : +53 (63 votes)
Publicado el 25,abril 2017 - 09:59
Bonjour,

Je pense qu'il faudrait créer un procédure navigateur, avec un jsevenement sur ton toggle pour capter chaque changement et appeler la fonction.

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});


ou un jQuery suffirait a récupérer les infos que tu souhaites

jordan
#8
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 25,abril 2017 - 15:04
super merci Jordan, je vais essayer.
Va falloir que j'apprenne Java,.. je pense que je comprendrai mieux...
#9
Publicado el 25,abril 2017 - 15:55
Francois avait soumis l'idée :
super merci Jordan, je vais essayer.
Va falloir que j'apprenne Java,.. je pense que je comprendrai mieux...


non tu ne comprendras pas mieux ...
si tu te mets à javascript peut être

;o)
#10
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 25,abril 2017 - 20:47
:merci: :D :D
#11
Miembro registrado
2.569 mensajes
Popularité : +222 (260 votes)
Publicado el 26,abril 2017 - 07:46
Pourquoi toujours implémenter une grosse machine comme jquery pour récupérer une simple valeur ?

Voilà la même page avec un bouton qui affiche la valeur du premier radio. J'ai rajouté juste un petit bout de script pour afficher la valeur. Charge à toi de récupérer cette valeur.

Le getElementsByName peut être remplacé par un getElementsById pour récupérer la valeur d'un radio particulier.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toggle Switches</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
function myClick(){
var radio = document.getElementsByName("view");
var i;
for (i = 0; i < radio.length; i++){
alert(radio[i].checked);
}
}
</script>
</head>
<body>
<section class="container">
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>

<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view2" value="week2" id="week2" checked>
<label for="week2" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view2" value="month2" id="month2">
<label for="month2" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>

<div class="switch switch-yellow">
<input type="radio" class="switch-input" name="view3" value="week3" id="week3" checked>
<label for="week3" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view3" value="month3" id="month3">
<label for="month3" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>
</section>

<section>
<button onclick="myClick()">Click me !!!</button>
</section>

<section class="about">
<p class="about-links">
<a href="http://www.cssflow.com/snippets/toggle-switches" target="_parent">View Article</a>
<a href="http://www.cssflow.com/snippets/toggle-switches.zip" target="_parent">Download</a>
</p>
<p class="about-author">
© 2012–2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
<a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
Original PSD by <a href="http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/" target="_blank">Orman Clark</a>
</p>
</section>
</body>
</html>


--
Cordialement,

Philippe SAINT-BERTIN
Géode Informatique
#12
Miembro registrado
950 mensajes
Popularité : +53 (63 votes)
Publicado el 26,abril 2017 - 10:08
Philippe SB a écrit :
Pourquoi toujours implémenter une grosse machine comme jquery pour récupérer une simple valeur ?

Voilà la même page avec un bouton qui affiche la valeur du premier radio. J'ai rajouté juste un petit bout de script pour afficher la valeur. Charge à toi de récupérer cette valeur.

Le getElementsByName peut être remplacé par un getElementsById pour récupérer la valeur d'un radio particulier.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toggle Switches</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
function myClick(){
var radio = document.getElementsByName("view");
var i;
for (i = 0; i < radio.length; i++){
alert(radio[i].checked);
}
}
</script>
</head>
<body>
<section class="container">
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>

<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view2" value="week2" id="week2" checked>
<label for="week2" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view2" value="month2" id="month2">
<label for="month2" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>

<div class="switch switch-yellow">
<input type="radio" class="switch-input" name="view3" value="week3" id="week3" checked>
<label for="week3" class="switch-label switch-label-off">Week</label>
<input type="radio" class="switch-input" name="view3" value="month3" id="month3">
<label for="month3" class="switch-label switch-label-on">Month</label>
<span class="switch-selection"></span>
</div>
</section>

<section>
<button onclick="myClick()">Click me !!!</button>
</section>

<section class="about">
<p class="about-links">
<a href="http://www.cssflow.com/snippets/toggle-switches" target="_parent">View Article</a>
<a href="http://www.cssflow.com/snippets/toggle-switches.zip" target="_parent">Download</a>
</p>
<p class="about-author">
© 2012-2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
<a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
Original PSD by <a href="http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/" target="_blank">Orman Clark</a>
</p>
</section>
</body>
</html>


--
Cordialement,

Philippe SAINT-BERTIN
Géode Informatique


Bonjour,

j'ai mis un exemple jquery, pour expliquer la démarche mais effectivement un simple javascript suffit ;)

jordan
#13
Miembro registrado
265 mensajes
Popularité : +14 (16 votes)
Publicado el 26,abril 2017 - 14:06
Bonjour Messieurs,

Comme très souvent avec les outils PC-SOFT les choses sont bien plus simples que ce que l'on peut imaginer :)
Bien trop souvent habitué(e)s que nous sommes aux usines à gaz présentées comme "incontournables" dans ce métier ;)

Il y a plusieurs solutions pour arriver à se servir de cette intéressante ressource, mais cela va aussi dépendre de votre version WB.

Sous WB 21 et antérieurs, il faut passer par un champ HTML.
En version 22 le champ Composant WEB est fait pour cela.

Dans les deux versions, et étant donné que nous avons la maîtrise du HTML, pourquoi ne pas indiquer dans chaque tag <label> susceptible d'être cliqué le nom d'une procédure JS ? (événement "onclick"). A laquelle vous pourriez même passer un paramètre.

Vous trouverez ici en téléchargement la mise en oeuvre de tous ceci, dans les deux versions (mon Dropbox personnel donc rien à craindre) :
https://www.dropbox.com/s/jd9447kp549qyb3/WB_Toogle.zip…

C'est un zip contenant deux pages.
Chacune d'elle doit être importée dans un projet de la version correspondante.

Cordialement

--
René MALKA
#14
Miembro registrado
2.569 mensajes
Popularité : +222 (260 votes)
Publicado el 26,abril 2017 - 14:23
Moi j'ai donné du js car je n'utilise plus webdev du fait de ses trop grosses lacunes en matière de rwd notamment. Je maîtrise du coup plus le js que webdev.

--
Cordialement,

Philippe SAINT-BERTIN
Géode Informatique
#15
Miembro registrado
70 mensajes
Popularité : +1 (1 vote)
Publicado el 27,abril 2017 - 00:25
Bonjour Jordan, Philippe et René, et merci beaucoup pour le temps consacré à ce sujet.
Je vais tester tout ça, et ne doute pas que ces différentes solutions fonctionnent.
Merci encore.
Mensaje modificado, 27,abril 2017 - 00:25
#16
Publicado el 28,abril 2017 - 13:32
"ÿÿÿÿÿÿ" a écrit :
> Bonjour Messieurs,
Bonjour René,

Merci pour le zip.
Cela m'a permis d'adapter un autre composant que je n'arrivai pas à
faire fonctionner.

Cordialement,

Christian.




Comme très souvent avec les outils PC-SOFT les choses sont bien plus simples
que ce que l'on peut imaginer :)
Bien trop souvent habitué(e)s que nous sommes aux usines à gaz présentées
comme "incontournables" dans ce métier ;)

Il y a plusieurs solutions pour arriver à se servir de cette intéressante
ressource, mais cela va aussi dépendre de votre version WB.

Sous WB 21 et antérieurs, il faut passer par un champ HTML.
En version 22 le champ Composant WEB est fait pour cela.

Dans les deux versions, et étant donné que nous avons la maîtrise du HTML,
pourquoi ne pas indiquer dans chaque tag <label> susceptible d'être cliqué le
nom d'une procédure JS ? (événement "onclick"). A laquelle vous pourriez
même passer un paramètre.

Vous trouverez ici en téléchargement la mise en oeuvre de tous ceci, dans les
deux versions (mon Dropbox personnel donc rien à craindre) :
https://www.dropbox.com/s/jd9447kp549qyb3/WB_Toogle.zip…

C'est un zip contenant deux pages.
Chacune d'elle doit être importée dans un projet de la version
correspondante.

Cordialement
#17
Publicado el 28,abril 2017 - 15:04
Rebonjour,

J'ai testé la page fournie dans le zip, celle utilisant un composant
web.
Pas de problème sous Chrome, Internet explorer et Edge, mais sous
Firefox la procedure 'Action' du composant web n'est jamais exécuté.
Donc impossible de récupérer la valeur.
Auriez-vous une solution pour Firefox ?

Cordialement,

Christian.

Le 28/04/2017, Christian a supposé :
"ÿÿÿÿÿÿ" a écrit :
Bonjour Messieurs,
Bonjour René,


Merci pour le zip.
Cela m'a permis d'adapter un autre composant que je n'arrivai pas à faire
fonctionner.

Cordialement,

Christian.




Comme très souvent avec les outils PC-SOFT les choses sont bien plus
simples que ce que l'on peut imaginer :)
Bien trop souvent habitué(e)s que nous sommes aux usines à gaz présentées
comme "incontournables" dans ce métier ;)

Il y a plusieurs solutions pour arriver à se servir de cette intéressante
ressource, mais cela va aussi dépendre de votre version WB.

Sous WB 21 et antérieurs, il faut passer par un champ HTML.
En version 22 le champ Composant WEB est fait pour cela.

Dans les deux versions, et étant donné que nous avons la maîtrise du HTML,
pourquoi ne pas indiquer dans chaque tag <label> susceptible d'être cliqué
le nom d'une procédure JS ? (événement "onclick"). A laquelle vous
pourriez même passer un paramètre.

Vous trouverez ici en téléchargement la mise en oeuvre de tous ceci, dans
les deux versions (mon Dropbox personnel donc rien à craindre) :
https://www.dropbox.com/s/jd9447kp549qyb3/WB_Toogle.zip…

C'est un zip contenant deux pages.
Chacune d'elle doit être importée dans un projet de la version
correspondante.

Cordialement
#18
Publicado el 28,abril 2017 - 15:10
Christian a émis l'idée suivante :
Rebonjour,

J'ai testé la page fournie dans le zip, celle utilisant un composant web.
Pas de problème sous Chrome, Internet explorer et Edge, mais sous Firefox la
procedure 'Action' du composant web n'est jamais exécuté.
Donc impossible de récupérer la valeur.
Auriez-vous une solution pour Firefox ?

Cordialement,

Christian.

Le 28/04/2017, Christian a supposé :
"ÿÿÿÿÿÿ" a écrit :
Bonjour Messieurs,
Bonjour René,


Merci pour le zip.
Cela m'a permis d'adapter un autre composant que je n'arrivai pas à faire
fonctionner.

Cordialement,

Christian.




En revanche, la page utilisant le champ HTML fonctionne bien sur
Firefox.

Cordialement,

Christian.


Comme très souvent avec les outils PC-SOFT les choses sont bien plus
simples que ce que l'on peut imaginer :)
Bien trop souvent habitué(e)s que nous sommes aux usines à gaz présentées
comme "incontournables" dans ce métier ;)

Il y a plusieurs solutions pour arriver à se servir de cette intéressante
ressource, mais cela va aussi dépendre de votre version WB.

Sous WB 21 et antérieurs, il faut passer par un champ HTML.
En version 22 le champ Composant WEB est fait pour cela.

Dans les deux versions, et étant donné que nous avons la maîtrise du HTML,
pourquoi ne pas indiquer dans chaque tag <label> susceptible d'être cliqué
le nom d'une procédure JS ? (événement "onclick"). A laquelle vous
pourriez même passer un paramètre.

Vous trouverez ici en téléchargement la mise en oeuvre de tous ceci, dans
les deux versions (mon Dropbox personnel donc rien à craindre) :
https://www.dropbox.com/s/jd9447kp549qyb3/WB_Toogle.zip…

C'est un zip contenant deux pages.
Chacune d'elle doit être importée dans un projet de la version
correspondante.

Cordialement
#19
Miembro registrado
265 mensajes
Popularité : +14 (16 votes)
Publicado el 28,abril 2017 - 18:33
Bonsoir Christian,

Avec plaisir, le problème soumis m'a aussi permis d'en apprendre ;)

C'est vrai que j'ai pris l'habitude de faire mes tests sous Chrome.
Et je confirme que sous Firefox il y a un problème avec le champ Composant Web, qu'il faut signaler au Support Technique !

Christian je crois que vous avez compris par vous même : il faut appliquer sous Webdev 22 / Composant Web la méthode utilisé avec le champ HTML sous Webdev 21. C'est à dire en créant une procédure navigateur qui va récupérer une valeur correspondant à une action sur le label, et déclarer le nom de cette procédure dans le code HTML, genre onclick="recupToogle('valeur');".

Cordialement

--
René MALKA
#20
Publicado el 01,mayo 2017 - 17:01
Bonjour René,

Page de test envoyé au stg sous la référence : ST/E523217.

Bien cordialement,

Christian.

"ÿÿÿÿÿÿ" a présenté l'énoncé suivant :
Bonsoir Christian,

Avec plaisir, le problème soumis m'a aussi permis d'en apprendre ;)

C'est vrai que j'ai pris l'habitude de faire mes tests sous Chrome.
Et je confirme que sous Firefox il y a un problème avec le champ Composant
Web, qu'il faut signaler au Support Technique !

Christian je crois que vous avez compris par vous même : il faut appliquer
sous Webdev 22 / Composant Web la méthode utilisé avec le champ HTML sous
Webdev 21. C'est à dire en créant une procédure navigateur qui va récupérer
une valeur correspondant à une action sur le label, et déclarer le nom de
cette procédure dans le code HTML, genre onclick="recupToogle('valeur');".

Cordialement
→ Volver a WEBDEV 2024