 |
ColorPickerのダウンロード |
以下のサイトからZIP形式のファイルをダウンロードします。
ColorPicker - jQuery plugin
https://www.eyecon.ro/colorpicker/
Downloadのタブをクリックしてダウンロードページへ進みます。
colorpicker.zip のリンクをクリックしてダウンロードします。
ダウンロードしたファイルを解凍すると css 、images、js の3つのフォルダが出てきます。
これを設置するHTMLページが置かれているディレクトリに jscolorpicker というディレクトリを作成し、
その中に css 、images、js をフォルダごとコピーして下さい。
備考
既にjQueryが配置されている場合に、別のバージョンで上書きしないよう別のディレクトリに置きましたが、
任意のディレクトリに配置しても結構です。
images に格納されている画像などの配置を変更する場合は colorpicker.cssの画像パスを変更する必要が
あるなど面倒になりますので上記の配置がおすすめです。
| |
レイアウト枠と一行テキスト領域の設置 |
下の例では3つの入力フォームがあり、フォーム左側にプレビュー用の■があります。
クラス名は後で使用しますので覚えておいて下さい。
レイアウト枠は任意ですので、必要なければ以下のようにします。
| |
ヘッダ内にソースを貼り付ける |
<head> 〜 </head> の間に以下のソースを貼り付けます。
"input.picker1, input.picker2, input.picker3" の部分でカラーピッカーを動作させるテキスト領域の
クラス名を指定します。
カラーピッカーを動作させるテキスト領域の数に合わせて修正を行って下さい。
備考
プレビュー用の■を配置せず、フォームだけ配置する場合は上記のソースのかわりに
以下のソースを貼り付けます。
| |
動作確認 |
プレビュー画面にして動作確認を行ってみます。
一行テキスト領域をクリックするとカラーピッカーが表示され、色を選択して右下のボタンを押すと
テキスト領域に色番号が入力され、左の■が選択した色と同じ色に変化します。
|
