gatsusat | 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 :
- <html>
- <head>
- <title>Test Nouvel Input</title>
- <style type="text/css">
- INPUT.ChampInc{
- float:left;
- margin-top:auto;
- margin-bottom:auto;
- width:70px;
- margin-right:0px;
- }
- INPUT.boutonhaut, INPUT.boutonbas {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 9px;
- padding:0px 1px;
- height:12px;
- margin:0px;
- line-height: 10px;
- display: block;
- border: 1px solid Gray;
- width: 14px;
- }
- </style>
- <script type="text/javascript">
- var CV_DelaiInt = 125; //Delai d'incrémentation afni de simuler un appui constant sur le bouton
- var CV_DelaiIncrement = 4000; //Délai avant d'augmenter la valeur d'incrémentation *5 puis *2 et ainsi de suite
- var CV_TimerInc=1;
- var CV_EtatTimer = true;
- var CV_MonInterval;
- var CV_TimerIncrement;
- function ChangeValue(TypeAction, ChampId, Value){
- switch(TypeAction) {
- case 0: //Stopper la fonction
- clearInterval(CV_MonInterval);
- clearInterval(CV_TimerIncrement);
- CV_TimerInc = 1;
- break;
- case 1: //Juste 1 clic
- Value = CV_TimerInc;
- document.getElementById(ChampId).value = parseInt(document.getElementById(ChampId).value) + Value;
- break;
- case 2://Lancer la fonction à intervalles réguliers
- CV_MonInterval = setInterval('ChangeValue(1,\'' + ChampId + '\',' + Value + ')', CV_DelaiInt);
- CV_TimerInc = Value;
- CV_EtatTimer = true;
- CV_TimerIncrement = setInterval('Timer()', CV_DelaiIncrement);
- break;
- default:
- break;
- }
- }
- function Timer(){
- if (CV_EtatTimer == true) {
- CV_TimerInc*=5;
- CV_EtatTimer = false;
- }
- else
- { CV_TimerInc*=2;
- CV_EtatTimer = true;
- }
- }
- </script>
- </head>
- <body>
- <input type="text" class="ChampInc" id="Texte" value="0">
- <input type="button" class="boutonhaut" value="/\" onclick="ChangeValue(1,'Texte',1)" onmousedown="ChangeValue(2,'Texte',1)" onmouseup="ChangeValue(0,'',0);">
- <input type="button" class="boutonbas" value="\/" onclick="ChangeValue(1,'Texte',-1)" onmousedown="ChangeValue(2,'Texte',-1)" onmouseup="ChangeValue(0,'',0);">
- </body>
- </html>
|
Message édité par gatsusat le 27-05-2005 à 09:25:27
|