PC SOFT

GRUPOS DE DISCUSSÃO PROFISSIONAL
WINDEV, WEBDEV e WINDEV Mobile

Inicio | Mensagens recentes | Conecte-se... |  | Português FR
Inicio → WEBDEV 2024 → Toogle en composant web
Toogle en composant web
Iniciado por francois, abr., 07 2017 5:08 PM - 19 respostas
#1
Publicado em abril, 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?
#2
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 08 2017 - 2:46 PM
Oups! bonjour d'abord! Merci pour vos réponses...
#3
Publicado em abril, 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?
#4
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 24 2017 - 1:41 PM
Malheureusement, non. Comme on peut le voir sur ce fil, pas de réponse...:(
Mensagem modificada, abril, 24 2017 - 1:41 PM
#5
Membro registado
950 mensagems
Popularité : +53 (63 votes)
Publicado em abril, 24 2017 - 2:43 PM
Bonjour,

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



jordan
#6
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 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.
#7
Membro registado
950 mensagems
Popularité : +53 (63 votes)
Publicado em abril, 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
#8
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 25 2017 - 3:04 PM
super merci Jordan, je vais essayer.
Va falloir que j'apprenne Java,.. je pense que je comprendrai mieux...
#9
Publicado em abril, 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)
#10
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 25 2017 - 8:47 PM
:merci: :D :D
#11
Membro registado
2.571 mensagems
Popularité : +222 (260 votes)
Publicado em abril, 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
#12
Membro registado
950 mensagems
Popularité : +53 (63 votes)
Publicado em abril, 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
#13
Membro registado
265 mensagems
Popularité : +14 (16 votes)
Publicado em abril, 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
#14
Membro registado
2.571 mensagems
Popularité : +222 (260 votes)
Publicado em abril, 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
#15
Membro registado
70 mensagems
Popularité : +1 (1 vote)
Publicado em abril, 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.
Mensagem modificada, abril, 27 2017 - 12:25 AM
#16
Publicado em abril, 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
#17
Publicado em abril, 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
#18
Publicado em abril, 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
#19
Membro registado
265 mensagems
Popularité : +14 (16 votes)
Publicado em abril, 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
#20
Publicado em maio, 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
→ Voltar para WEBDEV 2024