jqueryプラグインを使用したColorpicker

Question

私は、テキストの前景色と背景色を設定するためにcolorpickerを持つページを設計しようとしています。私は魅力的で、ポップアップで同じことを実装しようとしたカラーピッカーのデモを経験しました。クエリがある

http://www.eyecon.ro/colorpicker/

：私は下のリンクで説明するColorPickerを熟知だここに誰もがあるかどうかを知りたいのです「それは別の名前のdiv要素にこのプラグインをバインドすることは可能でしょうか？」そうならば、手助けすること自由に感じなさい。..

Answer 1

ページには、次のコードスニペットが含まれています

$('#colorpickerHolder').ColorPicker({flat: true}); 

最初の部分は、標準のjQueryのセレクタであるので、あなたはnoproblemがdiv要素のIDを交換しておく必要があります。

<div id="myPicker"></div> 

// snip 

$('#myPicker').ColorPIcker({flat: true}); 

ウェブサイトの呼び出しページには、これがあります。これは、入力フィールドで機能している可能性がありますか？私はパッケージをダウンロードしたので、より良い指示はありません。どのように動作するかを見るには、ソースコードを掘り下げなければならないかもしれません。

呼び出しコード jQueryの方法で要素を選択し、プラグインを呼び出すだけです。 $（ 'input'）。ColorPicker（オプション）;

Answer 2

私はこのカラーピッカーを使用しており、正常に動作します。私はあなたがこのカラーピッカーを使用するためのデモファイルを使用していると思います。デモファイル "index.html"では、$('#colorpickerHolder').ColorPicker({flat: true}); のようなコードスニペットを見つけることができますが、ここで変更を加えてもページ上の作業には影響しません。

あなたが気付いた場合、著者はトップ

<script type="text/javascript" src="js/layout.js?ver=1.0.2"> 
    </script> 

で、このファイルを別のコードファイルを含め、layout.js機能ColorPickerに対するすべての呼び出しが含まれています。

新しいページを作成することをお勧めします。先頭にこれらの行があります。今

<script type="text/javascript" src="js/jquery.js"> 
    </script> 
    <script type="text/javascript" src="js/colorpicker.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#colorpickerHolder').ColorPicker({ 
       flat: true 
      }); 
      $('#myColorpickerHolder').ColorPicker({ 
       flat: true 
      });   
     }); 
    </script> 

、単にIDが「colorpickerHolder」とページ内の「myColorpickerHolder」を持つ2つのdivを追加し、あなたは、それぞれが別々のカラーピッカーで表示されます。

Answer 3

これを試してください。

$(document).ready(function() { 
    $('#FieldID').ColorPicker({ 
    onSubmit: function(hsb, hex, rgb, el) { 
      $(el).val(hex); 
    $(el).ColorPickerHide(); 
    }, 
    onBeforeShow: function() { 
     $(this).ColorPickerSetColor(this.value); 
    } 
    }).bind('keyup', function(){ 
     $(this).ColorPickerSetColor(this.value); 
    }) 
}); 

あなたは、および/またはクラス（前に付加。（ドット））、および/または任意のCSSセレクタ（＃（シャープ）を先頭に追加）フィールドIDの昏睡区切りのリストで#FieldIDを置き換えることができます。