Physique
Mon premier article (stage de Master)
Mes projets
Musique
Scripts
Script jquery.colorselector.js
Informatique
Mon lycée
Mon premier article (stage de Master)
Script jquery.colorselector.js
jquery.colorselector.jsjquery.colorselector.js est un script additionnel à la librairie JavaScript jQuery. Il permet de façon très simple de transformer un champ input en champ de sélection intuitive de couleur.
Voilà une démonstration. Les champs sont modifiables « à la main » ou en s'aidant du sélecteur de couleur. Le format affiché dans le sélecteur et sauvegardé dépend du format dans le champ, format mis à jour si le champ est modifié manuellement. Les valeurs vides sont détectées et autorisées, les valeurs incorrectes sont détectées et indiquées.
Télécharger jquery.colorselector.js (8 ko)
Télécharger jquery.colorselector.min.js, la version « minifiée » de jquery.colorselector.js, qui prend moins de place (3 ko) et fonctionne aussi bien.
jquery.colorselector.js est distribué sous licence libre CeCILL.
jquery.colorselector.js fonctionne de façon autonome. Une fois le fichier téléchargé ainsi que la librairie JavaScript jQuery (par exemple en version minifiée), vous devez
<head> et </head> (en ajustant les liens comme il faut) :
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorselector.min.js"></script>
<input> concernés la classe colorsel, et éventuellement colorcss ou colorphp selon les formats que vous souhaitez autoriser. Des informations sont disponibles dans les commentaires initiaux du script (cf. ci-dessous).
///////////////////////////////////////////////////////////////////////////////
// Sélecteur de couleurs avec jQuery
// ****************************************************************************
// This software is governed by the CeCILL license under French law and
// abiding by the rules of distribution of free software. You can use,
// modify and/ or redistribute the software under the terms of the CeCILL
// license as circulated by CEA, CNRS and INRIA at the following URL
// "http://www.cecill.info/licences/Licence_CeCILL_V2-en.txt".
//
// Ce logiciel est régi par la licence CeCILL soumise au droit français et
// respectant les principes de diffusion des logiciels libres. Vous pouvez
// utiliser, modifier et/ou redistribuer ce programme sous les conditions
// de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
// à l'adresse "http://www.cecill.info/licences/Licence_CeCILL_V2-fr.txt".
//
// Copyright Cyril Ravat, <ravat@free.fr>, 2009-2011
// Website : http://www.cyril-ravat.fr/scripts/jquery.colorselector.php
// ****************************************************************************
//
// Fonctionne automatiquement sur les input de classe 'colorsel'
// Il suffit d'insérer ce fichier et jquery dans l'entête du fichier html.
// Si le champ input est aussi de classe 'colorcss', les formats acceptés sont
// les formats valides en css : '#xxx', '#xxxxxx' ou 'rgb(xxx,xxx,xxx)'
// Si le champ input est aussi de classe 'colorphp', le seul format accepté est
// le format rgb, mais sans 'rgb()' : 'xxx,xxx,xxx' en valeurs décimales
//
// Variables utilisées :
// lastid -> id du dernier input sélectionné
// colorfmt -> format de la couleur dans le dernier input sélectionné
// hex si '#xxx' ou '#xxxxxx', rgb1 si 'rgb(xxx,xxx,xxx)',
// rgb2 si 'xxx,xxx,xxx', 'none' sinon
// sel -> le sélecteur
// bgcolor -> background-color de <body>, simplement pour raccourci
// s,r,g,b,c -> chaines et compteurs pour la création du sélecteur, peuvent
// être détruits sans risque
//
// Classes et identifiants :
// #colorval -> <p> dans le sélecteur contenant la couleur en sélection
// .colorsample -> les échantillons de visualisation derrière chaque input
//
// Fonctions définies :
// validcolor -> détecte le format de couleur, corrige (supprime les espaces)
// la chaine contenu dans le champ input, indique visuellement
// si le format est incorrect, met à jour #colorval et colorfmt,
// retourne une chaine valide en css pour changer l'échantillon
// displaysel -> affiche ou cache le sélecteur
//
// Compatible avec Jquery 1.3.2 à 1.6.1
///////////////////////////////////////////////////////////////////////////////
$(function(){
// Variables contenant
// * l'id du dernier champ ayant appelé le sélecteur
// * le format d'origine du derniere input modifié
var lastid = false, colorfmt = false, sel,
bgcolor = $('body').css('background-color'), s, r, g, b, c;
// Fonction de détection de format 'hex' ('#xxx' ou '#xxxxxx'),
// 'rgb1' ('rgb(xxx,xxx,xxx)') ou rgb2 ('xxx,xxx,xxx')
function validcolor(id) {
var s = $('#'+id).val(), parts, correct = true;
if ( s.length == 0 ) {
if ( $('#'+id).is('.colorphp') ) colorfmt = 'rgb2';
else colorfmt = 'hex';
$('#colorval').text('Pas de valeur');
s = '#AAA';
}
else if ( parts = s.match(/^\s*[#]?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\s*$/) ) {
colorfmt = 'hex';
$('#colorval').text( s = '#'+parts[1] );
if ( $('#'+id).is('.colorphp') ) correct = false;
$('#'+id).val(s);
}
else if ( parts = s.match(/^\s*rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)\s*$/) ) {
colorfmt = 'rgb1';
$('#colorval').text( s = 'rgb('+parts[1]+','+parts[2]+','+parts[3]+')' );
if ( $('#'+id).is('.colorphp') ) correct = false;
$('#'+id).val(s);
}
else if ( parts = s.match(/^\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*$/) ) {
colorfmt = 'rgb2';
$('#colorval').text( s = parts[1]+','+parts[2]+','+parts[3] );
if ( $('#'+id).is('.colorcss') ) correct = false;
$('#'+id).val(s);
s = 'rgb('+s+')';
}
else {
colorfmt = 'none';
$('#colorval').text( '???' );
s = '#AAA';
correct = false;
}
if ( correct ) $('#'+id).css({'background-color':'#FFF'});
else $('#'+id).css({'background-color':'#F33'});
$('#colorval').css('background-color',s);
return s;
};
// Fonction d'affichage/disparition du sélecteur
function displaysel(id) {
lastid = id;
validcolor(id);
sel.css({'top':5+$('#'+id).offset().top+$('#'+id).outerHeight(),
'left':$('#'+id).offset().left}) .show();
};
// Sélecteur
sel = $('<div></div>')
.css({'background-color':bgcolor,'width':'198px','height':'160px',
'padding':'1px','margin':'0px','position':'absolute',
'border':'1px solid #000','display':'none'});
s = '0369cf';
for ( r=0; r<6; r++ )
for ( g=0; g<6; g++ )
for ( b=0; b<6; b++ ) {
c = s[r]+s[r]+s[g]+s[g]+s[b]+s[b];
// Génération des <div> contenant les couleurs
sel.append($('<div id="'+c+'"></div>')
.css({'background-color':'#'+c,'width':'9px','height':'9px',
'float':'left','margin':'0px','padding':'0px',
'cursor':'pointer','border':'1px solid '+bgcolor})
.click(function() {
$('#'+lastid).val($('#colorval').text()).change();
sel.hide();
})
// Au survol, la valeur de #colorval est modifiée
.mouseenter(function() {
var c = $(this).attr('id');
$('#colorval').css({'background-color':'#'+c});
// Conversion de hexa à rgb si besoin
if ( colorfmt.substr(0,3) == 'rgb' ) {
c = [c.substr(0,2),c.substr(2,2),c.substr(4,2)];
for ( var i in c ) c[i] = parseInt('0x'+c[i]);
c = c.join(',');
if ( colorfmt == 'rgb1' ) c = 'rgb('+c+')';
}
else c = '#'+c;
$('#colorval').text(c);
$(this).css({'border':'1px solid #AAA'});
})
.mouseleave(function() {
$(this).css({'border':'1px solid '+bgcolor});
})
);
}
// <p> contenant la dernière valeur survolée
sel.append($('<p id="colorval"></p>')
.css({'margin':'1px','padding':'5px','width':'186px','height':'17px',
'text-align':'center','clear':'left','cursor':'pointer'})
.click(function() {
var c = $(this).text();
if ( c[0] !== '?' && c[0] !== 'P' )
$('#'+lastid).val(c).change();
sel.hide();
})
);
$('body').append(sel);
// Un clic dehors cache le sélecteur
$(document).click(function(event) {
if ( !$(event.target).is('.colorsel') && !$(event.target).is('.colorsample') )
sel.hide();
});
// S'applique à chaque input de classe colorsel
$('.colorsel').each(function() {
var id = this.id, sample;
if ( id.length == 0 )
$(this).attr('id',id = 'colorsel'+Math.round(Math.random()*1000000));
// Échantillon de visualisation de la couleur
sample=$('<span class="colorsample"></span>')
.css({'background-color':validcolor(id),'cursor':'pointer',
'display':'-moz-inline-block','display':'inline-block',
'width':'100px','height':$(this).outerHeight(),
'margin':'0px 10px','vertical-align':'middle'});
$(this).after(sample);
// Modification manuelle au changement de valeur
$(this).change(function() {
sample.css({'background-color':validcolor(id)});
});
// Gestion des apparitions et disparitions du sélecteur
$(this).focus(function() { displaysel(id); });
sample.click(function() {
if ( sel.is(':visible') && ( lastid == id ) )
sel.hide();
else displaysel(id);
});
});
});