Color Picker Farbtastic synchronisation sur 2 classes

Question

http://acko.net/dev/farbtastic

Je voudrais avoir quelques INPUT et les utilisateurs peuvent changer de couleur pour chacun. Cependant, chaque entrée est synchronisée avec d'autres classes (comme la couleur de fond du corps ou la couleur de fond du menu).

Je souhaite pouvoir changer de couleur avec Farbtastic Color Picker et cela affecte à la fois l'ENTRÉE et la CLASSE/ID qui est synchronisée avec l'ENTRÉE. Comment faire ça? L'exemple ci-dessous va changer la couleur de "colorwell" seulement mais comment synchroniser l'autre élément aveC# color1, # color2 ... séparément? Merci

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
    $('#demo').hide(); 
    var f = $.farbtastic('#picker'); 
    //var p = $('#picker').css('opacity', 0.25); 
    //var selected; 
    $('.colorwell') 
     .each(function() { f.linkTo(this); }) 
     .focus(function() { 
     //if (selected) { 
     // $(selected).css('opacity', 0.75).removeClass('colorwell-selected'); 
     //} 
     f.linkTo(this); 
     //p.css('opacity', 1); 
     //$(selected = this).css('opacity', 1).addClass('colorwell-selected'); 
     }); 
    }); 
</script> 


<form action="" style="width: 500px;"> 
    <div id="picker" style="float: right;"></div> 
    <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div> 
    <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div> 
    <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div> 

</form> 

Answer 1

je devais modifier le fichier farbtastic.js légèrement ... au fond, j'ajouté cette ligne:

$('.' + this.id).css('background-color',fb.color); 

ci-dessous la ligne 234 dans le script original. Il prend l'ID de la boîte de saisie actuellement sélectionnée et modifie la couleur de fond de la même classe que l'ID. Donc changer #color1 avec farbtastic mettra également à jour la classe .color1. Vous devrez peut-être modifier le farbtastic.js vous-même si vous voulez changer autre chose que la couleur d'arrière-plan.

Obtenez le farbtastic.js modifié ici et voyez un demo here.