Contrôle pour formulaire

Télécharger le projet
Commenter

Description

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,CouleurDuControle);
variable.onmove = votrenomdefonction;
variable.onchange = votrenomdefonction;
variable.onclick = votrenomdefonction;
</SCRIPT>

Source / Exemple : 


// 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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Arto_8000)