🤽 ➰ 🏨 jQuery ColorPicker-色を選択します。 🦐 🚵🏾 💢

色の選択についてまだ触れていないことに驚きました。この誤解を早急に修正し、別のjQueryライブラリプラグインであるColorPickerについてお話しします。すぐに警告したいのですが、プラグインはpngファイルを使用しており、私たちの愛するIE6では小さな問題が発生します。

いつものように、最初に例のデモンストレーションを行い、それから初めて使用方法を理解します。

例： x3k.name/habrahabr/jquery.colorpicker.html

jQueryライブラリー、colorpicker.jsプラグイン自体、colorPickerのかなりの数の写真が必要です（写真はアーカイブに含まれています）。

ColorPickerのスタイルの説明はサンプルファイルに直接含まれています。一般的に、別のファイルに配置しない限り、それらに触れないことが最善です。

そして、おそらく最も単純なユースケース-ページ要素としてのcolorPickerを使用して、最初の例を分析します。

HTMLコードは決して簡単ではありません。

<div id = "colorpickerHolder"> </ div>

colorPickerのコンテナとして機能するdiv要素のみ。そして、以下はcolorPicker自体が呼び出すjavascriptコードです。

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

$( document ).ready( function (){ // №1 $( '#colorpickerHolder' ).ColorPicker({flat: true }); }); * This source code was highlighted with Source Code Highlighter .

プラグインに値trueのフラットオプションを指定します-これがcolorPicker '表示オプションを決定するものです。

例2の次の使用例は、colorPickerを入力要素にアタッチすることです。 HTMLコードを提供できませんでした：

<input id = "colorpickerField" type = "text" value = "00ff00" />

そして、最初のJavaScriptコードの例よりも「飽和」しています。

$（ document ）.ready（ function （）{
//例2
$（ '#colorpickerField' ）.ColorPicker（{
onSubmit：関数（hsb、hex、rgb）{
$（ '#colorpickerField' ）.val（hex）;
}、
onBeforeShow： function （）{
$（ this ）.ColorPickerSetColor（ this .value）;
}
}）
.bind（ 'keyup' 、 function （）{
$（ this ）.ColorPickerSetColor（ this .value）;
}）;
}）;
*このソースコードは、ソースコードハイライターで強調表示されました。

ここで、 colorPickerを呼び出して、2つのオプションonSubmitとonBeforeShowを渡します。これらの値はコールバック関数です。 OnSubmitは、目的の色が選択され、右下隅の選択確認アイコンが押されたときに呼び出される関数を定義し、 onBeforeShowは、colorPickerが選択される前に呼び出される関数を定義します。

少し混乱するように聞こえますが、さらに、キーチェーンイベントを別の機能に関連付けることで、コールチェーンが補完されます。それを実際的な側面から見て、これらすべてをロシア語で説明してみましょう。最後から始めましょう...

したがって、 colorpickerField identifierを持つinput要素で、 keyupイベントを関連付けます。このイベントの発生時に実行される関数は、colorPickerが開かれる色を設定します-はい、実際、これは名前からも見ることができます。

次に、プラグインに渡す2つのパラメーターについて説明します。 colorPickerが表示される前（ onBeforeShow ）、keyupイベントとまったく同じ関数が呼び出され、同じことを行います。さて、色が選択された後（ onSubmit ） -16進形式の値が入力要素に書き込まれます。

3番目の例-colorPickerは、div要素に挿入された画像の背後に「隠れ」ます。 HTMLファースト：

<div id = "colorSelector"> <div> </ div> </ div>

ここでは、スタイルを使用して、背景を設定します。これは、デフォルトで、png形式の画像を「透けて見える」ようにします（ソースコードの対応するスタイルを見てください）。

そして、この例のjavascriptコード：

//プロイマーNo. 3
$（ '#colorSelector' ）.ColorPicker（{
色： '＃0000ff' 、
onShow： function （cp）{
$（cp）.fadeIn（500）;
falseを返します。
}、
onHide： function （cp）{
$（cp）.fadeOut（500）;
falseを返します。
}、
onChange：関数（hsb、hex、rgb）{
$（ '#colorSelector div' ）
.css（ 'backgroundColor' 、 '＃' + hex）;
}
}）;
*このソースコードは、ソースコードハイライターで強調表示されました。

colorオプションでは、 colorPickerが開く色をonShowオプションとonHideオプションで指定します（名前はそれ自体を表していますか？）、 jQUeryライブラリのメソッドを使用して、アニメーションを設定し、ColorPickerの外観と非表示を少し高めます。

onChangeについて少し-現在の色が変わると、すぐにそれを読み取ってdiv要素のbackgroundColorの css-propertyを変更し、png画像を「照らす」背景をこのように強制的に変更します。

一般に、例を通して、私たちは利用可能なほとんどすべてのオプションに精通しました。 colorPickerが呼び出されるイベントであるeventNameのみに言及します。デフォルトでは、これはクリックです。また、 livePreview-このオプションをfalseに設定すると、色選択プロセス中のデジタル値の変更を無効にできます。デフォルトはtrueです。

さて、アーカイブをダウンロードしてください： x3k.name/habrahabr/jquery.colorpicker.rar

チュトゥ

jQuery ColorPicker-色を選択します。

More articles: