ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 カラーピッカーに関するメモ

関連ページ



ソース編集でカラーピッカーを設置する場合
https://aimix.jp/jqcolorpickersc.html


ホームページビルダーの操作で設置する場合
https://aimix.jp/jqcolorpicker.html






  カラーピッカーのボタンや画像について

カラーピッカーで色を選択後に適用するボタンは 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>






| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved