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

Yahoo!ブックマークに登録

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





 カラーピッカー (ソース編集で設置)

このページについて

カラーピッカー設置に関する説明をおこなっています。
ホームページビルダーの操作で設置する場合は以下のページをご参照下さい。
https://aimix.jp/jqcolorpicker.html


サンプル

フォームをクリックするとカラーピッカーが表示されます。
カラーピッカーで色を選択し、右下のボタンをクリックするとフォーム内に色番号が入力され、
左側の■が変更後の色に変化する事が確認できます。





  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" の部分でカラーピッカーを動作させるテキスト領域の
クラス名を指定します。
カラーピッカーを動作させるテキスト領域の数に合わせて修正を行って下さい。




備考

プレビュー用の■を配置せず、フォームだけ配置する場合は上記のソースのかわりに
以下のソースを貼り付けます。








  動作確認

プレビュー画面にして動作確認を行ってみます。

一行テキスト領域をクリックするとカラーピッカーが表示され、色を選択して右下のボタンを押すと
テキスト領域に色番号が入力され、左の■が選択した色と同じ色に変化します。







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