CONTRÔLE POUR FORMULAIRE objet, controle, hexadecimal, formulaire, Source N°37620

Information sur la source

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é: 10 689 / 579

Auteur : Arto_8000

Site perso

Ecrire un message privé

Note :

10,00 / 10

1
2
3
4
5
6
7
8
9
10

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,CouleurDuControle);
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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

controleur.js 2 457 octets
index.html 1 742 octets

Télécharger le zip

Historique

18 mai 2006 17:36:39 :: .

Sources du même auteur

Toutes les sources de Arto_8000

Sources de la même categorie

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

Commentaires

Aucun commentaire pour le moment.

Ajouter un commentaire

Discussions en rapport avec ce code source

controle liste de formulaire par gwerz

probleme avec fichier joint par desrimaisd

controle de formulaire par MarsL

javascript et style pour formulaire par scguillaume

controle dans un formulaire par adadoudou

controle d'une valeur radio par colibrius

controle formulaire + textarea par cowlili

ca coince avec cette fonction par B e N z

probleme de controle de formulaire par rachidphp93

help par Danila