Un colorPicker récalcitrant

renaud26 · 17/06/2011, 20h43

Bonjour à tous,

Pour personnaliser quelques css, j'ai fait une petite fonction avec des colorPickers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
//tableau avec les ID des inputs text qui seront remplis au choix couleur
var champs = new Array("menu_fond","menu_link","menu_link_hover");
 
//tableau des valeurs en provenance de la BDD
var coulDefaut = new Array("<?php echo $pref['menu_fond']; ?>","<?php echo $pref['menu_link']; ?>","<?php echo $pref['menu_link_hover']; ?>");
 
// var qui sera utilisée si le user change le code HEXA dans le input
var newCouleurChoisie; 
 
$.each(champs, function(i){
	$('#param_'+i).ColorPicker({ // ces DIV contiennent le petit carré du picker
		color: coulDefaut[i], //positionne le picker sur valeur BDD
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
 
                onChange: function (hsb, hex, rgb) {
                $('#'+champs[i]).val('#' + hex); //remplit le input du code coul
                }
         }); 
               //si le user saisit un code HEXA :
               $('#'+champs[i]).change( function(){
		newColorChoisie = $('#'+champs[i]).val();
		//alert(newColor); 
                //modifie l'apparence du selecteur du picker sur la coul saisie
		$('#param_'+i+' div').css('backgroundColor', newColorChoisie);
                //LA CA BLOQUE !
                // je voudrais que le picker, lorsque on le clique, affiche son 
                //curseur positionné sur la couleur qui vient d'être saisie
		$('#param_'+i).ColorPicker({
			color: newColorChoisie
		});
	});
 
}); //fin boucle each

J'ai commenté tant que j'ai pu, mais pas si simle.
Pour résumer, le paramètre "color" force la sélection d'une couleur quand on ouvre le picker, c'est la couleur par défaut. Au début, je veux qu'elle soit positionnée sur les valeurs de la BDD, et c'est le cas. Le input affiche également cette valeur en hexa, et le petit carré du picker "plié" est également de cette couleur.
Mais si le user veut modifier le input directement en saisissant un hexa sans passer par le picker, je veux qu'il soit modifié par cette saisie.
D'où cette partie finale du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$('#param_'+i).ColorPicker({
	color: newColorChoisie
});

Mais rien à faire, il reste bloqué sur la valeur BDD déclarée en début de fonction...
Merci aux champions de jquery qui passeraient par là...

danielhagnoul · 18/06/2011, 01h19

Bonsoir

Désolé, mais je n'arrive même pas à l'afficher ce picker truc !

Je lui trouve un aspect veillot et peu sympathique et il date de 2009.

Voici une liste de 10 plugins Color Picker .

Le jPicker est joli !

Je viens de le tester, voici mon code, car la documentation est un peu brouillonne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="Stylesheet" type="text/css" href="../jPicker/css/jpicker-1.1.6.min.css" />
	<link rel="Stylesheet" type="text/css" href="../jPicker/jPicker.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<p>
			Après avoir téléchargé le jPicker et vérifié les liens vers les styles, les images et le script. Il suffit de cliquer sur le petit carré de couleur ci-dessous pour choisir une couleur.
		</p>
		<p id="choixID"></p>
	</section>
	<section id="couleurID"></section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-18T01:00:00.000+02:00" pubdate>2011-06-18</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script charset="utf-8" src="../jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			$.fn.jPicker.defaults.images.clientPath='../jPicker/images/';
 
			$("#couleurID").jPicker({
				window:{
					expandable: true,
					title: "Choissisez une couleur :",
					alphaSupport: true,
					position: {
						x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
						y: 'center', // acceptable values "top", "bottom", "center", or relative px value
					}
				},
				color:{
                                        // attention a va de 0 à 255 !
					active:new $.jPicker.Color({ r: 0, g: 255, b: 0, a: 192 })
				}
			},
			function(color, context){
				var c = color.val("all");
 
				if (c){
					$("#choixID").html("Rouge = " + c.r +
									   "<br/>Vert = " + c.g +
									   "<br/>Bleu = " + c.b +
									   "<br/>Opacité = " + (c.a/255).toFixed(2) +
									   "<br/>Hex = " + c.hex);
				}
			});
		});
	</script>
</body>  
</html>

renaud26 · 18/06/2011, 07h15

Hello !

Vieillot mon picker ?
Pas beau mon picker ?
Non mais dis donc !

Regarde-le en action, il vaut largement celui que tu me donnes en exemple :
http://komunitasweb.com/2009/09/3-am...icker-plugins/

C'est celui du milieu, le colorPicker. Ben moi j'le trouve classos !
Mais bon, bref, c'était pas la question.
Comment (re)-forcer la couleur par défaut en cours de route ?

18/06/2011, 07h15	#3
renaud26 Membre confirmé Inscription : mars 2003 Messages : 1 043 Détails du profil Informations personnelles : Âge : 48 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : mars 2003 Messages : 1 043 Points : 285 Points : 285	Hello ! Vieillot mon picker ? Pas beau mon picker ? Non mais dis donc ! Regarde-le en action, il vaut largement celui que tu me donnes en exemple : http://komunitasweb.com/2009/09/3-am...icker-plugins/ C'est celui du milieu, le colorPicker. Ben moi j'le trouve classos ! Mais bon, bref, c'était pas la question. Comment (re)-forcer la couleur par défaut en cours de route ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email