2017-07-19 33 views
0

私はspectrum.jsをカラーピッカーとして使用しています。私はどのように行うかを理解できない2つのことがあります。私の設定は次のようになります。Spectrum.jsはカラーピッカーを「空白」にリセットします

$("#myColorThing").spectrum({ 
    preferredFormat: "rgb", 
    showPaletteOnly: true, 
    showPalette: true, 
    hideAfterPaletteSelect: true, 
    color: "", 
    showInput: true, 
    allowEmpty: true, 
    palette: [ 
     [ 
      "rgb(000,000,128)", 
      "rgb(000,000,255)", 
      "rgb(000,128,000)", 
      "rgb(000,128,128)", 
      "rgb(000,128,255)" 
     ], 
     [...],... 
    ] 
}); 

私の質問は以下のとおりです。

  1. 私だけpaletteオプションを使用していますと私は色の5つのCOLSの5行があります。レンダリングされたウィジェットはドロップダウンのように見えますが、 "透明な" /チェッカーのあるイメージは選択を意味しません。ファイン。ウィジェットをアクティブにして色を選択すると、やり取りをする方法がありますか?ウィジェットを非選択状態に戻しますか?
  2. #1に関連しています。 paletteの「カラー」オプションとしてその「透過」/チェッカー画像を使用することが可能なので、それを選択するとバッキング入力ファイルの値がクリアされますか?

答えて

0

私は質問1の回避策を見つけました。コードを少し改定しました。 spectrumウィジェットが添付された基本html input要素を作成しました。私はその後を追加し、そのonClickアクションは...spectrum("destroy")になります。その後、スペクトルインスタンスを再作成します。ラ:

ベースHTML:リセット魔法を行うことが日常

<div id='colorDiv' class='form-group'> 
    <label for='myColorThing'>Event Color</label> 
    <input type='text' name='myColorThing' id='myColorThing'> 
    <button id='defaultColor' class='btn btn-sm btn-default'>Default Color</button> 
</div> 

JS:

$("#defaultColor").on("click", function() { 
    resetColorPicker(); 
}); 

function resetColorPicker() { 
    $("#myColorThing").spectrum("destroy"); 
    $("#myColorThing").val(""); 

    $("#myColorThing").spectrum({ 
     preferredFormat: "rgb", 
     showPaletteOnly: true, 
     showPalette: true, 
     hideAfterPaletteSelect: true, 
     color: "", 
     showInput: true, 
     allowEmpty: true, 
     palette: [ 
      [ 
       "rgb(000,000,128)", 
       "rgb(000,000,255)", 
       "rgb(000,128,000)", 
       "rgb(000,128,128)", 
       "rgb(000,128,255)" 
      ], 
      [...],... 
     ] 
    }); 
} 
関連する問題