1

私はこのカラーピッカーを使用していますhttp://acko.net/blog/farbtastic-jquery-color-picker-plug-in/ その by steven

ドキュメントからですが、私はそれを次のように使用しています

 $(document).ready(function() {

    $('#picker').farbtastic('#color');


  });

そしてhtmlコードは`

`

私はそれを2つの別々の部門に作成する必要があります。入力で色の16進値を変更したいのですが、別の部門の背景に色が表示されます。

こんな風に使ったら

<div id="colorpicker"></div>
    <input type="text" id="color" name="color" value="#123456" />
    <div id='color' ></div>

更新は 1 つの ID で行われるため、この ID では入力のみが色とその 16 進値で変更されます。スクリプトhttp://acko.net/files/farbtastic/demo/farbtastic.jsから、 関数内のパラメーターを 1 つだけ取るので、分割の色が変わるたびに色の 16 進値が入力時に更新されるようにします。

4

1 に答える 1

2

同じ ID を持つ 2 つの要素を使用することはできません。そのようには機能しません。スクリプト作成者の Web ページから宛先 ID を渡すと、デモの動作が正確にわかります。さらに下にスクロールすると、関数を渡すことができる指示があります。これはあなたがしたいことです：

$('#colorpicker').farbtastic(setColors);

var setColors = function(color){
  $('#colorText').val(color);
  $('#colorBackground').css('background-color' : color);
}

私はこれをテストしていませんが、要点を理解し、正しい道を進んでいるはずです。

[更新] これをフィドルでテストしましたが、動作しませんが、著者のドキュメントでは正確です。だからあなたができることは次のとおりです。

<div id="colorpicker"></div>
<input type="text" id="colorText" value="#123456" />
<div id="colorDiv">div<div>

2 つの個別の ID、1 つは div 用、もう 1 つはテキスト用で、両方を選択するだけです。

var domNodes = $('#colorDiv, #colorText');
$('#colorpicker').farbtastic(domNodes);

ここにフィドルがあります

また、入力に背景色をまったく付けたくない場合は、デフォルトの機能をオーバーライドして、好きなことを行うことができます。

JSFiddle

$.farbtastic(colorpicker).linkTo(callBack);

function callBack(color) {
    $('#colorText').val(color);
    $('#colorDiv').css('background-color', color);
}
于 2013-01-23T15:42:50.223 に答える