|
PROFESSIONAL NEWSGROUPS WINDEV, WEBDEV and WINDEV Mobile |
| | | | | |
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/demoCode 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 950 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 950 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 |
| |
| |
| | | |
|
| | |
| |
Registered member 2,574 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 950 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,574 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 |
| |
| |
| | | |
|
| | | | |
| | |
| | |
| |
|
|
|