farbtastic Fonction de rappel PlugIn

Question

Je ne fais que configurer une page Web avec un sélecteur de couleur. J'ai choisi farbtastic.

Mon problème est que la fonction de rappel ne fonctionne pas. Voici le code que j'ai utilisé:

$('#colorPicker1').farbtastic('#background-color', function callback() { 
    /*commands*/ 
}); 

La fonction de rappel n'est pas appelée lorsque l'utilisateur choisit une couleur.

Comment résoudre ce problème?

Answer 1

farbtastic appelé comme vous l'avez fait

$('selector').farbtastic(...) 

attend un seul argument optionnel. Cela peut être un noeud DOM, un objet jQuery, un sélecteur jQuery ou une fonction. Donc, vous devez appeler la fonction comme indiqué ci-dessous

$('#colorPicker1').farbtastic(function(color){ 
    // commands 
}); 

Si vous voulez utiliser l'élément #-couleur de fond, vous devez l'utiliser dans le corps de callbacks

$('#colorPicker1').farbtastic(function(color){ 
    $('#background-color').css({'background-color':color}); 
    // commands 
}); 

Answer 2

Votre message est Je sais mais juste dans le cas:

var picker = $.farbtastic('#colorPicker1'); //picker variable 
picker.setColor("#b6b6ff"); //set initial color 
picker.linkTo(onColorChange); //link to callback 

function onColorChange(color) { 
    dosomeStuff(); 
} 

Answer 3

Après avoir fait une recherche à rien avec je après presque 1 ans de votre question, je pense qu'il n'y a pas d'autre option que de le coder manuellement.

Je viens avec cette solution après le piratage un peu farbtastic et colorpicker plugins jquery:

/* 
* ColorPicker. 
*/ 
// Utility functions. 
function convertHexToRGB(hex) { 
    var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); 
    return [hex >> 16,(hex & 0x00FF00) >> 8,(hex & 0x0000FF)]; 
} 

function convert_RGB_to_HSL(rgb) { 
    var min, max, delta, h, s, l; 
    var r = rgb[0], g = rgb[1], b = rgb[2]; 
    min = Math.min(r, Math.min(g, b)); 
    max = Math.max(r, Math.max(g, b)); 
    delta = max - min; 
    l = (min + max)/2; 
    s = 0; 
    if (l > 0 && l < 1) { 
     s = delta/(l < 0.5 ? (2 * l) : (2 - 2 * l)); 
    } 
    h = 0; 
    if (delta > 0) { 
     if (max == r && max != g) h += (g - b)/delta; 
     if (max == g && max != b) h += (2 + (b - r)/delta); 
     if (max == b && max != r) h += (4 + (r - g)/delta); 
     h /= 6; 
    } 
    return [h, s, l]; 
} 

$('#footer-text-color-selector').hide(); 
$.farbtastic('#footer-text-color-selector') 
    .setColor('#21759B') 
    .linkTo(function(color){ 
     $('#footer-text-color').css({ 
      'backgroundColor':color, 
      'color': (convert_RGB_to_HSL(convertHexToRGB(color))[2] > 125) ? '#000' : '#FFF' 
     }); 

     $('#footer-preview a').css('color', color); 

     // XXX Any other things-to-do when the input change. 
    }); 

// Hide & Show behaviour. 
$('#footer-text-color').click(function() { 
    $('#footer-text-color-selector').fadeIn(); 
}); 

$(document).mousedown(function() { 
    $('#footer-text-color-selector').each(function() { 
     var display = $(this).css('display'); 
     if (display == 'block') 
      $(this).fadeOut(); 
    }); 
}); 

// Initial behaviour. 
$('#footer-text-color').css({ 
    'backgroundColor': $('#footer-text-color').val(), 
    'color': (convert_RGB_to_HSL(convertHexToRGB($('#footer-text-color').val()))[2] > 125) ? '#000' : '#FFF' 
}); 

$('#footer-preview a').css('color', $('#footer-text-color').val());