PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Toogle en composant web
Toogle en composant web
Débuté par francois, 07 avr. 2017 17:08 - 19 réponses
Posté le 07 avril 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?
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 08 avril 2017 - 14:46
Oups! bonjour d'abord! Merci pour vos réponses...
Posté le 23 avril 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?
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 24 avril 2017 - 13:41
Malheureusement, non. Comme on peut le voir sur ce fil, pas de réponse...:(
Message modifié, 24 avril 2017 - 13:41
Membre enregistré
950 messages
Popularité : +53 (63 votes)
Posté le 24 avril 2017 - 14:43
Bonjour,

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



jordan
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 24 avril 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.
Membre enregistré
950 messages
Popularité : +53 (63 votes)
Posté le 25 avril 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
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 25 avril 2017 - 15:04
super merci Jordan, je vais essayer.
Va falloir que j'apprenne Java,.. je pense que je comprendrai mieux...
Posté le 25 avril 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)
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 25 avril 2017 - 20:47
:merci: :D :D
Membre enregistré
2 572 messages
Popularité : +222 (260 votes)
Posté le 26 avril 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
Membre enregistré
950 messages
Popularité : +53 (63 votes)
Posté le 26 avril 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
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 26 avril 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
Membre enregistré
2 572 messages
Popularité : +222 (260 votes)
Posté le 26 avril 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
Membre enregistré
70 messages
Popularité : +1 (1 vote)
Posté le 27 avril 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.
Message modifié, 27 avril 2017 - 00:25
Posté le 28 avril 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
Posté le 28 avril 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
Posté le 28 avril 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
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 28 avril 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
Posté le 01 mai 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