Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1327 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Type de Champ Intéressant

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Type de Champ Intéressant

n°1098660
gatsusat
Posté le 26-05-2005 à 20:27:23  profilanswer
 

Je me suis dit qu'il manquait un type de champ utile sur le WEB
 
c'est un champ avec 2 petites flèches qui incrémente la case lorsque l'on appuie dessus, et qui s'autoincrémente lorsque on reste appuyé dessus.
 
Trêve de bavardage voici ce que ça donne :  
http://gatsu.ftp.free.fr/html/testinput.html
 
au final je mettrai tout ceci dans une fonction PHP du genre
InputInc(NomduChamp, idChamp, valeurpardefaut)
 
Je me demande s'il y a des choses à améliorer dans la partie purement CSS et Javascript
Ou si certains d'entre vous avez des idées supplémentaires
 
Voici le code :
 
edit : Vala La version finale.
Je pensais faire du Javascript Object. Mais je crois que j'allais m'embrouiller dans n'importe quoi
 

Code :
  1. <html> 
  2. <head> 
  3.     <title>Test Nouvel Input</title> 
  4. <style type="text/css"> 
  5. INPUT.ChampInc{ 
  6.     float:left; 
  7.     margin-top:auto
  8.     margin-bottom:auto
  9.     width:70px; 
  10.     margin-right:0px; 
  11. INPUT.boutonhaut, INPUT.boutonbas { 
  12.     font-family: Arial, Helvetica, sans-serif; 
  13.     font-size: 9px; 
  14.     padding:0px 1px; 
  15.     height:12px; 
  16.     margin:0px; 
  17.     line-height: 10px; 
  18.     display: block; 
  19.     border: 1px solid Gray; 
  20.     width: 14px; 
  21. </style> 
  22. <script type="text/javascript"> 
  23. var CV_DelaiInt = 125; //Delai d'incrémentation afni de simuler un appui constant sur le bouton  
  24. var CV_DelaiIncrement = 4000; //Délai avant d'augmenter la valeur d'incrémentation *5 puis *2 et ainsi de suite  
  25. var CV_TimerInc=1; 
  26. var CV_EtatTimer = true;
  27. var CV_MonInterval;
  28. var CV_TimerIncrement;
  29. function ChangeValue(TypeAction, ChampId, Value){
  30.    switch(TypeAction) { 
  31.    case 0: //Stopper la fonction   
  32.        clearInterval(CV_MonInterval); 
  33.          clearInterval(CV_TimerIncrement);
  34.          CV_TimerInc = 1;
  35.        break
  36.    case 1: //Juste 1 clic   
  37.           Value = CV_TimerInc;
  38.           document.getElementById(ChampId).value = parseInt(document.getElementById(ChampId).value) + Value; 
  39.          break
  40.    case 2://Lancer la fonction à intervalles réguliers 
  41.           CV_MonInterval = setInterval('ChangeValue(1,\'' + ChampId + '\',' + Value + ')', CV_DelaiInt);     
  42.           CV_TimerInc = Value;
  43.           CV_EtatTimer = true;
  44.           CV_TimerIncrement = setInterval('Timer()', CV_DelaiIncrement);
  45.           break
  46.     default
  47.         break
  48.     } 
  49. function Timer(){
  50.     if (CV_EtatTimer == true) {
  51.         CV_TimerInc*=5;
  52.         CV_EtatTimer = false;
  53.     }
  54.     else
  55.     { CV_TimerInc*=2;
  56.       CV_EtatTimer = true;
  57.     }
  58. }
  59. </script> 
  60. </head> 
  61. <body> 
  62. <input type="text" class="ChampInc" id="Texte" value="0"> 
  63. <input type="button" class="boutonhaut" value="/\" onclick="ChangeValue(1,'Texte',1)" onmousedown="ChangeValue(2,'Texte',1)" onmouseup="ChangeValue(0,'',0);"> 
  64. <input type="button" class="boutonbas" value="\/"  onclick="ChangeValue(1,'Texte',-1)" onmousedown="ChangeValue(2,'Texte',-1)" onmouseup="ChangeValue(0,'',0);"> 
  65. </body> 
  66. </html>


Message édité par gatsusat le 27-05-2005 à 09:25:27
mood
Publicité
Posté le 26-05-2005 à 20:27:23  profilanswer
 

n°1098706
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 26-05-2005 à 20:59:22  profilanswer
 

Je trouve ton idée intéressante.
Perso, je rajouterais un timer du genre, si le gars reste cliqué sur la souris, arrivé à +10, ça change l'incrément par 5 ou 10 au lieu de un.
Ensuite, je mettrais un bouton à gauche et un à droite, parce que là, ça ressemble à du Windows, mais c'est vraiment pas jolie et c'est vraiment petit.
Mais sinon, c'est une bonne idée.

n°1098711
gatsusat
Posté le 26-05-2005 à 21:01:57  profilanswer
 

ben le but était de faire comme un input de type Windows
pour les avoir tous les deux sur même coté.
et puis ce n'est qu'un brouillon, je me suis surtout porté sur le javascript
 
Pour le timer c'est ce que j'ai cherché à faire taleur mais je n'ai pas réussi, jvais retourner essayer ta manière de faire à toi. Moi j'essayai de modifier les intervales du timer. erf j'allais me lancer dans de la merde
ceci dit je rentre chez moi et je vous redit ca taleur

n°1099049
cerel
Posté le 27-05-2005 à 09:28:49  profilanswer
 

Et pour ceux qui n'ont pas JS d'active ?
 
Ce que je te recommande de faire, et de tout metre dans un fichier separe.
Ensuite ce fichier JS lorsqu'il est execute, va cherche tous les input de type texte ayant une certaine classe.
Une fois ces input trouves, le script va ajouter dynanimquement les boutons a cote ainsi que les evente handler necessaires.
 
Et voila, comme ca si ton visiteur n'as pas js, il ne voit pas ton nouveau controle, mais il peut quand meme utiliser le formulaire.

n°1099081
FlorentG
Unité de Masse
Posté le 27-05-2005 à 09:49:07  profilanswer
 

+1, les machins qui nécessitent JS doivent être affiché via JS. Sinon les gens sans verront 2 boutons inopérants.... Quoique..... Hum, ce qu'on pourrait faire, c'est qu'en cliquant sur les boutons, ça recharge le formulaire avec la valeurs dé/incrémentée :sol:

n°1099082
gatsusat
Posté le 27-05-2005 à 09:49:12  profilanswer
 

Je l'attendais celle là.
 
T'es pas bête mon biquet, jvais le faire de ce pas

n°1099094
gatsusat
Posté le 27-05-2005 à 09:55:16  profilanswer
 

heu techniquement comment compte tu écrire les boutons à coté du input ????
 
car niveau HTML ca donne ca :  
 
<input name="MonInput" id="MonInput" class="ChampInc">
 
 
 
Donc Okay pour détecter le champ. Mais pour écrire dynamiquement à coté de ce champ ?
 
j'aurai mis alors plutôt un span ou un div de type inline de cette manière :  
 
<input name="MonInput" id="MonInput" class="ChampInc">
<span class="ChampInc"></span>
 
et ensuite j'écris dedans

n°1099097
FlorentG
Unité de Masse
Posté le 27-05-2005 à 09:56:29  profilanswer
 

Deux petits input type="submit" (pour l'envoi pour ceux qui ont pas JS :sol: )

n°1099123
gatsusat
Posté le 27-05-2005 à 10:09:27  profilanswer
 

bon mon pti florentG tu n'as po pigé rhoooooooooo
c'est juste une amélioration du champ input de base.
Si le gars a des inputs avec des entiers dedans et qu'il cherche à les incrémenter. je pense que ma solution est bonne.
 
nullement je ne cherche à envoyer le formulaire sur le serveur.
 
imaginonsque le client veut mettre 31 à la Place de 30 dans le input
ben il a juste à cliquer sur le bouton.
et s'il veut ajouter 40, ben il reste appuyé sur le bouton.
même pas besoin de taper 40 dans le champ.  
je trouve ca plus ergonomique.
et le gars qui n'as pas JS, ben il ne voit pas les boutons


Message édité par gatsusat le 27-05-2005 à 10:10:59
n°1099148
FlorentG
Unité de Masse
Posté le 27-05-2005 à 10:23:22  profilanswer
 

Mais nan, c'est toi qu'a rien pigé ;) Mes deux petits submits, après clique :

  • Dé/Incrémente directement si JS
  • Recharge la page avec l'input incrémenté

mood
Publicité
Posté le 27-05-2005 à 10:23:22  profilanswer
 

n°1099209
gatsusat
Posté le 27-05-2005 à 10:55:25  profilanswer
 

ahh oki ma chérie


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Type de Champ Intéressant

 

Sujets relatifs
[C] Comment définir un type de donnée binaire de taille variable ?Bouton radio et champ et select
Input de type fileQuel type de variable utiliser?
quel est mon type de serveur pour certificat SSL?Comment récupérer une image depuis un champ blob ?
method GET + input type fileImpossible de trouver ce champ de formulaire...
Tri sur un autre champ que la valeur identifiante dans un étatMsChart type XY
Plus de sujets relatifs à : Type de Champ Intéressant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR