begin process at 2012 02 14 04:00:08
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > CONTRÔLE POUR FORMULAIRE

CONTRÔLE POUR FORMULAIRE


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :objet, controle, hexadecimal, formulaire Niveau :Initié Date de création :16/05/2006 Date de mise à jour :18/05/2006 17:36:39 Vu / téléchargé :14 345 / 688

Auteur : Arto_8000

Ecrire un message privé
Site perso
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Contrôle vertical avec trois événements qui sont gérés (onmove, onchange et onclick). Dans l'exemple que j'ai mis dans le zip j'utilise seulement l'événement onmove, mais les autres peuvent être très utile aussi.

Comment Utiliser :

Initialisation de la classe de mon contrôle :
<SCRIPT language="javascript" type="text/javascript" src="controleur.js"></SCRIPT>

Création d'un contrôle :
<SCRIPT language="javascript" type="text/javascript">
variable = new btn(IdDuControle,positionX,positionY,valeurMaximum ,valeurParDefault,Hauteur,CouleurDeLaTige,CouleurD uControle);
variable.onmove = votrenomdefonction;
variable.onchange = votrenomdefonction;
variable.onclick = votrenomdefonction;
</SCRIPT>

Source

  • // controleur.js //
  • var element2move = false;
  • var lstElement = new Array();
  • function select(obj)
  • {
  • element2move = obj.id;
  • lstElement[element2move].onclick();
  • }
  • function unselect()
  • {
  • try
  • {
  • bkE = element2move; // Garde la valeur en mémoire
  • element2move = false; // On efface la valeur de l'élément a bouger //
  • /*
  • Note: Si on efface pas cette valeur avant d'effectuer la fonction onchange le controleur peut se
  • déplacer pendant l'exécution de la fonction onchange surtout quand il y a un alert, promt ou confirm.
  • */
  • lstElement[bkE].onchange();
  • }
  • catch(e)
  • {
  • // La personne a cliqué ailleur que sur un contrôle, donc rien a déselectionner //
  • }
  • }
  • function bougeElement(event)
  • {
  • if (element2move)
  • {
  • eventY = (navigator.appName == "Microsoft Internet Explorer") ? window.event.clientY - 10 : event.pageY; // Trouve la bonne position selon le navigateur //
  • object = lstElement[element2move];
  • posX = Math.max(eventY,object.startpoint); // S'assure que l'objet n'est pas déplacer trop bas //
  • posX = Math.min(posX,(object.maxheight + object.startpoint)); // S'assure que l'objet n'est pas déplacer trop haut //
  • document.getElementById(element2move).style.top = posX; // Affiche le controleur a la bonne position //
  • lstElement[element2move].value = Math.round((posX-lstElement[element2move].startpoint)/lstElement[element2move].maxheight*lstElement[element2move].maxvalue); // Calcule la valeur de l'objet//
  • lstElement[element2move].onmove(); // Effectue l'événement de mouvement //
  • }
  • }
  • function btn(id,posX,posY,maxValue,defaultValue,height,colorTige,colorControl) // Ajuste les valeurs et écrit le contrôleur //
  • {
  • lstElement[id] = this;
  • this.id = id;
  • this.maxheight = height;
  • this.startpoint = posY;
  • this.onmove = function (){};
  • this.onchange = function (){};
  • this.onclick = function () {};
  • this.value = defaultValue;
  • this.maxvalue = maxValue;
  • document.write('<DIV style="background-color:'+colorTige+';height:'+height+'px;width:2px;left:'+(posX+15)+'px;top:'+posY+'px;position:absolute;"> </DIV>');
  • document.write('<DIV style="background-color:'+colorControl+';height:10px;width:30px;left:'+posX+'px;top:'+(posY+defaultValue)+'px;position:absolute;" tag="a" id="'+id+'" onmousedown="select(this)"></DIV>');
  • }
// controleur.js //

var element2move = false;
var lstElement = new Array();

function select(obj)
{
    element2move = obj.id;
    lstElement[element2move].onclick();
}

function unselect()
{
    try
    {
        bkE = element2move; // Garde la valeur en mémoire
        element2move = false; // On efface la valeur de l'élément a bouger //
        /*
        Note: Si on efface pas cette valeur avant d'effectuer la fonction onchange le controleur peut se
        déplacer pendant l'exécution de la fonction onchange surtout quand il y a un alert, promt ou confirm.
        */
        lstElement[bkE].onchange();
    }
    catch(e)
    {
        // La personne a cliqué ailleur que sur un contrôle, donc rien a déselectionner //
    }
}

function bougeElement(event)
{
    if (element2move)
    {
        eventY = (navigator.appName == "Microsoft Internet Explorer") ? window.event.clientY - 10 : event.pageY; // Trouve la bonne position selon le navigateur //
        object = lstElement[element2move];
        posX = Math.max(eventY,object.startpoint); // S'assure que l'objet n'est pas déplacer trop bas //
        posX = Math.min(posX,(object.maxheight + object.startpoint)); // S'assure que l'objet n'est pas déplacer trop haut //
        
        document.getElementById(element2move).style.top = posX; // Affiche le controleur a la bonne position //
        
        lstElement[element2move].value = Math.round((posX-lstElement[element2move].startpoint)/lstElement[element2move].maxheight*lstElement[element2move].maxvalue); // Calcule la valeur de l'objet//
        lstElement[element2move].onmove(); // Effectue l'événement de mouvement //
    }
}

function btn(id,posX,posY,maxValue,defaultValue,height,colorTige,colorControl) // Ajuste les valeurs et écrit le contrôleur //
{
    lstElement[id] = this;
    this.id = id;
    this.maxheight = height;
    this.startpoint = posY;
    this.onmove = function (){};
    this.onchange = function (){};
    this.onclick = function () {};
    this.value = defaultValue;
    this.maxvalue = maxValue;
    document.write('<DIV style="background-color:'+colorTige+';height:'+height+'px;width:2px;left:'+(posX+15)+'px;top:'+posY+'px;position:absolute;"> </DIV>');
    document.write('<DIV style="background-color:'+colorControl+';height:10px;width:30px;left:'+posX+'px;top:'+(posY+defaultValue)+'px;position:absolute;" tag="a" id="'+id+'" onmousedown="select(this)"></DIV>');
}

 Conclusion

Mise à jour à venir :

- Contrôle à la horizontale
- Règle le bug de la taille du contrôle avec IE (affiche le contrôle avec des tailles trop grandes)

Fonctionnalité :

- Firefox (parfait)
- IE (juste le problème de taille avec le contrôle ... rien de majeur)
- Autre à confirmer

Si vous avez des commentaires, suggestions ... insultes. Allez-y.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 mai 2006 17:36:39 :
.

 Sources du même auteur

Source avec Zip PAF (PHP / AJAX FRAMEWORK)
Source avec Zip Source avec une capture MENU DYNAMIQUE CSS À 100%
Source avec Zip CLASSE AJAX COMPLÈTE
Source avec Zip CONVERSION AVEC OPÉRATEUR BINAIRE
Source avec Zip Source avec une capture CHARIVARIE AVEC XMLHTTPREQUEST

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

 Sources en rapport avec celle ci

Source avec une capture FORMULAIRE D'INSCRIPTION+VÉRIFICATION par ellissss
Source avec Zip SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE. par theptitprince
Source avec Zip Source avec une capture CONTRÔLE DES CHAMPS D'UN FORMULAIRE [CCF] par bultez
PETIT SCRIPT MAIS EFFICACE POUR VALIDER LES DATES par slash135
Source avec Zip LISTE DE FONCTION POUR CONTROLER LES CHAMPS D'UN FORMULAIRE.... par biv83

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

controle liste de formulaire [ par gwerz ] Bonjour,Je cherche un script très simple, permettant d'obliger les internautes à selectionner une option dans une liste, sinon le formulaire ne se pos probleme avec fichier joint [ par desrimaisd ] bonjour a tous,je ne connais pas du tout le javascript et j'ai donc besoin d'un peu d'aide (ca ne devrait pas etre trop dur je pense pour ceux ki conn controle de formulaire [ par MarsL ] Mars'Lj'ai repris un source du site que j'ai adapté à mon prog, ca ne fonctionne pas et je ne vois pas pourquoi. Il se peut que se soit tout bete mais javascript et style pour formulaire [ par scguillaume ] comment appliquer un style (CSS) à un objet de formulaire (type liste) sur l'envenement ONCLICK d'un autre objet du formulaire (type radio)?merci controle dans un formulaire [ par adadoudou ] Bonjour,En fait j'ai créer un formulaire HTML où deux champs me pose problème. J'ai un champs date et un champs quantité et j'aurais voulu savoir comm controle d'une valeur radio [ par colibrius ] je suis dans le kk !! je n'arrive pas a faire un controle en javascript d'une valeur radio issue d'un formulaire. j'ai apparament isol&#233; le pb. si controle formulaire + textarea [ par cowlili ] Bonjour,j'ai un problème: je n'arrive pas à faire un contrôle pour vérifier si les textarea de mon formulaire ne sont pas vide. J'ai essayé de la faço ca coince avec cette fonction [ par B e N z ] salut tt le monde enfaite moi je suis en stage ds une soci&#233;t&#233; et on m'as charger de faire un formulaire pour leur site intranet m&#233; le b probleme de controle de formulaire [ par rachidphp93 ] bonjour tout le monde,ja'i un probleme de contr&#244;le de saisi, je teste si la case est vide ou pas pour l'instant, si oui je reste sinon je date dans formulaire [ par dlgforum ] Bonjour, Voilà, j'ai un formulaire dans lequel je saisie une date et je souhaiterai un controle pour vérifier si cette date est bien entre deux dates.


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,919 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales