Ayxcolorpiker - sélécteur de couleurs javascript

Télécharger le projet
Commenter

Description

Ce sélecteur de couleur vous permettra de choisir une couleur simplement et rapidement.
Il est assez ergonomique et s'inspire du style de sélecteur de PHPBB3.
Le code est optimisé au maximum je pense...

Il y a une fonction close() et open() qui servent respectivement à cacher ou afficher le sélecteur sur un evenement que vous définirez.

Dans le Zip, vous trouverez un exemple d'utilisation très simple de cette classe.

Source / Exemple : 


/**


  •  @author   AlphaYaX

  •  @version  1.1

    • /


/**


  •  @name   Class ayxColorPiker

  •  @desc   Selecteur de couleur

  •  @param  psColorPanelDiv : Div qui contiendra le selecteur de couleur

    • /

function ayxColorPiker(psColorPanelDiv)
{
  /****


      
  •  Attributs

        
      •   
        •   
        • /

  this.m_divColorPannel  = psColorPanelDiv; // Div qui contiendra la pallete de couleurs.
  this.m_divSourcePannel = "";              // Div qui contiendra la couleur de retour
  this.m_nStep           = 50;              // Pas pour la génération des couleurs. (varie entre 0 et 255)

  /**


      
  •  @name   dispColor

    •   
  •  @desc   Affiche la couleur survolée dans le div d'affichage

    •   
  •  @param  psColor : Couleur actuellement survolee

        
    • /

  this.dispColor = function (psColor)
  {
    document.getElementById(this.m_divSourcePannel).style.backgroundColor = psColor;
  };

  /**


      
  •  @name   close

    •   
  •  @desc   Ferme la fenetre de selection de la couleur

    •   
  •  @param  <none>

        
    • /

  this.close = function ()
  { 
    document.getElementById(this.m_divColorPannel).style.display = 'none'; 
  };

  /**


      
  •  @name   open

    •   
  •  @desc   Ouvre la fenetre de selection de la couleur

    •   
  •  @param  <none>

        
    • /

  this.open = function ()
  { 
    document.getElementById(this.m_divColorPannel).style.display = 'block'; 
  };
  

  // Creation des elements de base du tableau
  var oTableContainer = document.getElementById(this.m_divColorPannel);
  var oTable = document.createElement("Table");   oTableContainer.appendChild(oTable);
  var oTBody = document.createElement("TBody");   oTable.appendChild(oTBody);
  
  // Ecart entre les cellules de couleurs
  var attSpacing = document.createAttribute("cellspacing");
  attSpacing.nodeValue  = "1";   
  oTable.setAttributeNode(attSpacing);
  
  // Style sur le tableau
  oTable.border = "1px solid black";
  oTable.style.margin  = "0px";
  oTable.style.padding = "0px";
  
  // Création des lignes
  for (var iRed=0; iRed<256; iRed+=this.m_nStep)
  {
    // Nouvelle ligne
    var oRow = document.createElement("Tr");    oTBody.appendChild(oRow);
    
    for (var iGreen=50; iGreen<256; iGreen+=this.m_nStep)
    {
      for (var iBlue=0; iBlue<256; iBlue+=this.m_nStep)
      {
        // Création de la cellule
        var oCell   = document.createElement("Td");   oRow.appendChild(oCell);
        var sColor  = "rgb("+iRed +","+iGreen +","+iBlue +")";
        
        // Style sur les cellules
        oCell.style.width   = 8;
        oCell.style.height  = 8;
        oCell.style.margin  = 0;
        oCell.style.padding = 0;
        oCell.style.backgroundColor = sColor;
                
        // Evenements
        oCell.onclick       = function() { oColorPiker.close(); };
        oCell.onmouseover   = function() { oColorPiker.dispColor(this.style.backgroundColor); };
      };
    };
  };

};

Conclusion :


Ce sélecteur de couleur n'est peut être pas parfait, mais il a l'avantage d'être facilement adaptable à la plupart des situations.

Cette version est stable et sans bugs connus.
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.