Type de Champ Intéressant

Type de Champ Intéressant - HTML/CSS - Programmation

Marsh Posté le 26-05-2005 à 20:27:23    

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
Reply

Marsh Posté le 26-05-2005 à 20:27:23   

Reply

Marsh Posté le 26-05-2005 à 20:59:22    

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.

Reply

Marsh Posté le 26-05-2005 à 21:01:57    

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

Reply

Marsh Posté le 27-05-2005 à 09:28:49    

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.

Reply

Marsh Posté le 27-05-2005 à 09:49:07    

+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:

Reply

Marsh Posté le 27-05-2005 à 09:49:12    

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

Reply

Marsh Posté le 27-05-2005 à 09:55:16    

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

Reply

Marsh Posté le 27-05-2005 à 09:56:29    

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

Reply

Marsh Posté le 27-05-2005 à 10:09:27    

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
Reply

Marsh Posté le 27-05-2005 à 10:23:22    

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é

Reply

Marsh Posté le 27-05-2005 à 10:23:22   

Reply

Marsh Posté le 27-05-2005 à 10:55:25    

ahh oki ma chérie

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed