PC SOFT

PROFESSIONAL NEWSGROUPS
WINDEVWEBDEV and WINDEV Mobile

Home → WEBDEV 2024 → Toogle en composant web
Toogle en composant web
Started by francois, Apr., 07 2017 5:08 PM - 19 replies
Posted on April, 07 2017 - 5:08 PM
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?
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 08 2017 - 2:46 PM
Oups! bonjour d'abord! Merci pour vos réponses...
Posted on April, 23 2017 - 11:12 AM
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?
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 24 2017 - 1:41 PM
Malheureusement, non. Comme on peut le voir sur ce fil, pas de réponse...:(
Message modified, April, 24 2017 - 1:41 PM
Registered member
945 messages
Popularité : +53 (63 votes)
Posted on April, 24 2017 - 2:43 PM
Bonjour,

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



jordan
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 24 2017 - 10:05 PM
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.
Registered member
945 messages
Popularité : +53 (63 votes)
Posted on April, 25 2017 - 9:59 AM
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
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 25 2017 - 3:04 PM
super merci Jordan, je vais essayer.
Va falloir que j'apprenne Java,.. je pense que je comprendrai mieux...
Posted on April, 25 2017 - 3:55 PM
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)
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 25 2017 - 8:47 PM
:merci: :D :D
Registered member
2,566 messages
Popularité : +222 (260 votes)
Posted on April, 26 2017 - 7:46 AM
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
Registered member
945 messages
Popularité : +53 (63 votes)
Posted on April, 26 2017 - 10:08 AM
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
Registered member
265 messages
Popularité : +14 (16 votes)
Posted on April, 26 2017 - 2:06 PM
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
Registered member
2,566 messages
Popularité : +222 (260 votes)
Posted on April, 26 2017 - 2:23 PM
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
Registered member
70 messages
Popularité : +1 (1 vote)
Posted on April, 27 2017 - 12:25 AM
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 modified, April, 27 2017 - 12:25 AM
Posted on April, 28 2017 - 1:32 PM
"ÿÿÿÿÿÿ" 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
Posted on April, 28 2017 - 3:04 PM
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
Posted on April, 28 2017 - 3:10 PM
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
Registered member
265 messages
Popularité : +14 (16 votes)
Posted on April, 28 2017 - 6:33 PM
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
Posted on May, 01 2017 - 5:01 PM
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