 |
カラーピッカーのボタンや画像について |
カラーピッカーで色を選択後に適用するボタンは images ディレクトリにあります。
上下に2つ重なった画像ですが、上が通常時、下がオンマウス時に表示されるものです。
デフォルトのボタン
 |
変更してみたボタン
 |
また、入力枠の画像は 上から 「通常時」、「選択状態」、「クリック状態」となっています。
備考
画像のサイズも変更する場合は colorpicker.css の編集も必要です。
| |
カラーピッカーのスタイルについて |
デフォルトでは黒い背景のカラーピッカーですが、ダウンロードしたフォルダをのぞいてみると
images ディレクトリにカラーピッカーを構成する画像があります。
表示されるカラーピッカーはこれらの画像を組み合わせたものですので、別の画像に
置き換える事で自由なデザインにする事ができます。
サイズを変更する場合は .css ファイルも同時に編集が必要です。
| |
カラーピッカーの入力フォーム内の値が欠ける場合は |
実際に設置した際に以下のように入力フォーム内の値下部が欠けてしまいました。
この場合、cssディレクトリの colorpicker.css を以下のように修正します。
height が 11px になっていますので、今回は 13px に修正しました。
修正後はプレビュー画面で正しく表示される事を確認しておきます。
| |
ヘッダ内に貼り付けたソースのメモ |
<script type="text/javascript">
$(function()
{
// 「一行テキスト領域かつ指定クラス」の要素を探してmySLCRに格納
var mySLCR = $('input.picker1, input.picker2, input.picker3');
mySLCR .ColorPicker({
// カラーピッカーで右下の決定ボタンを押した時の動作
onSubmit: function(hsb, hex, rgb, el)
{
// 対象要素（ここではテキストエリア）へ色番号を入れる
$(el).val('#' + hex);
// カラーピッカーを閉じる
$(el).ColorPickerHide();
// 対象要素（ここではテキストエリア）のクラス名を取得
var class_name = $(el).attr("class");
// 同じクラス名を持つdiv領域の文字色を指定色に変更
$("div." + class_name).css('color', '#' + hex);
},
// カラーピッカー表示前に行う処理
onBeforeShow: function ()
{
// カラーピッカーポップアップ時の選択色をvalueの色に
$(this).ColorPickerSetColor(this.value);
}
})
// キーが上がった（キーボードのキーを離した）際に行う処理
.bind('keyup', function()
{
// カラーピッカーポップアップ時の選択色をvalueの色に
$(this).ColorPickerSetColor(this.value);
});
// ページのロード後に行う処理
$(document).ready(function()
{
// 一致した要素を格納したmySLCRに対して繰り返し処理
jQuery.each(mySLCR, function()
{
// 対象要素のvalueの値を取得
var ol_input_dvalue = $(this).attr("value");
// 対象要素のクラス名を取得
var ol_class_name = $(this).attr("class");
// 対象要素と同じクラス名を持つdiv要素の文字色を指定色に変更
$("div." + ol_class_name).css('color', ol_input_dvalue);
});
});
});
</script>
|
