1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. (objet) scrollbar

(objet) scrollbar

2/5 (1 avis)

Vue 18 378 fois - Téléchargée 44 809 fois

Télécharger le projet
Commenter

Description

Permet de créé des scrollbars pour des scripts ou formulaires

Son implantation:
1. Incluez le .js <SCRIPT language="Javascript" type="text/javascript" src="scrollbar.js"></SCRIPT>
2. Incluez certains events <BODY onmousemove="deplacement(event);" onmouseup="relache(event);">
3. instancié vos scrolls / initScrollbar(id,horizontal ou pas,longueur(px),valeur de départ,coord. X,coord. Y);
4. pour pouvoir relier ses changements à vos scripts, modifier la méthode change() - Il est tjrs possible accèder à leur valeur grâce à valeurDe(id du scrollbar)

Script a été testé sur Internet Explorer, Mozilla Firefox, Opera

Source / Exemple : 


var objCourrant = ""; //Id courrant
var valeurs = new Array(); //Informations pour chacun des scrollbar

function appuie(event,id)
{
    objCourrant = id;
}
function relache(event)
{
    objCourrant = "";
}
function deplacement(event) //lorsque la souris se déplace
{
    id = objCourrant;
    if(id != "" )
    {
        if(valeurs[id][1]) //Si le scrollbar est à l'horizontal
        {
            if(navigator.appName.indexOf("Microsoft") != -1)
                x = window.event.clientX;
            else
                x = event.pageX;
            
            if(x < valeurs[id][3]) x=valeurs[id][3];
            if(x >valeurs[id][3]+valeurs[id][2]) x=valeurs[id][3]+valeurs[id][2];
            
            document.getElementById("s"+id).style.left = x;
            
            valeurs[id][0] = x-(valeurs[id][3]);
        }
        else //Si le scrollbar est à la vertical
        {
            if(navigator.appName.indexOf("Microsoft") != -1)
                y = window.event.clientY;
            else
                y = event.pageY;
            
            if(y < valeurs[id][4]) y=valeurs[id][4];
            if(y > valeurs[id][4]+valeurs[id][2]) y=valeurs[id][4]+valeurs[id][2];
            
            document.getElementById("s"+objCourrant).style.top = y;
            
            valeurs[id][0] = y-(valeurs[id][4]);
        }
        change();
    }
}

function initScrollbar(id,dirHor,longueur,valeurDep,X,Y)
{
    valeurs[id] = new Array();
    valeurs[id][0] = valeurDep;
    valeurs[id][1] = dirHor;
    valeurs[id][2] = longueur;
    valeurs[id][3] = X;
    valeurs[id][4] = Y;
    
    //Dessin du scrollbar
    //Div de fond
    document.write("<DIV style='background-color:#CCCCCC;position:absolute;top:"+Y+";left:"+X+";")
    if(dirHor)
        document.write("width:"+(longueur+20)+"px;height:30px;");
    else
        document.write("width:30px;height:"+(longueur+20)+"px;");
    document.write("'>");
    document.write("</DIV>");
    
    //Div centrale
    document.write("<DIV style='background-color:#DCDCDC;position:absolute;");
    if(dirHor)
        document.write("top:"+(Y+5)+"px;left:"+X+"px;width:"+(longueur+20)+"px;height:20px;");
    else
        document.write("top:"+Y+"px;left:"+(X+5)+"px;width:20px;height:"+(longueur+20)+"px;");
    document.write("'></DIV>");
    
    //Poigné
    document.write("<DIV id='s"+id+"' style='position:absolute;");
    if(dirHor)
        document.write("top:"+Y+";left:"+(X+valeurDep)+";width:20px;height:30px;");
    else
        document.write("top:"+(Y+valeurDep)+";left:"+X+";width:30px;height:20px;");
    document.write("background-color:#000000;' onmousedown='appuie(event,"+id+")'></DIV>");
}

function valeurDe(id)
{
    return valeurs[id][0];
}

Conclusion :


Deux exemples sont inclus dans le zip
exemple1.htm (un très simple)
couleurs.htm (qui permet de trouver le code hexadécimal d'une couleur)
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaire
psy4meuh
Messages postés
23
Date d'inscription
jeudi 5 juin 2003
Statut
Membre
Dernière intervention
23 août 2006
23 août 2006 à 17:18
Problème majeur : les scrollbars sont en position absolue sur la page... donc problème quand la mise en page change, et quand la page est plug grande que l'écran. Dommage car le principe est vraiment pas mal! J'espère que tu feras une maj ;) A+
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 (PhiL666)