JSFColorPicker コンポーネントは、カラー・パレットの表示およびその後の 色の選択に使用できるヘルパー・ボタンを、<input> フィールドに追加します。 入力フィールドのコンテンツは、カラー・スウォッチとして表示されます (オプションで、選択された色の名前がスウォッチに表示されます。)
JSFColorPicker は、 選択のみのコンポーネントです (色を入力することはできません)。つまり、このコンポーネントでは、 許容される選択項目のリストが事前に定義されます。許容される色のリストは、 コンポーネントの属性として指定されます。色は、16 進値で指定され、 オプションで、16 進値に一致する名前が付きます。 これは、値および値のラベルを指定する、<option> 子タグを含む HTML <select> タグと類似しています。
カラー・パレットを含むポップアップの振る舞いは、 Windows® ポップアップと同じです。 ポップアップでスウォッチをクリックすると、ポップアップは表示されなくなります。ポップアップの外側のページで任意の場所を クリックすると、ポップアップが表示されなくなります。ポップアップは通常、 入力フィールドの下に、左端に位置合わせして表示されます。ポップアップが入力フィールドの下に 収まらない (例えば、入力フィールドがウィンドウの下部付近にある) 場合、 入力フィールドの上に表示されます。これは、CSS クラスを介してスタイル設定できます。
<hx:selectOneColor>
<input type="text">
カラー・ピッカーの値は、 入力フィールドの値として渡されます。この値は、コンポーネント・コンストラクターで 指定される 16 進数のカラー値の 1 つである必要があります。最初にページに値が渡されない場合、 ピッカーは初期値を持ちません。
型テキストの入力に関連付けられたすべての属性が サポートされています。
型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。
hX_5.addComponent("id", new hX_5.JSFColorPicker(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
button-border |
入力フィールドに対するポップアップ・ボタンの表示方法を制御します。 |
button-color |
ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。 |
css-prefix |
カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。 |
colors |
セミコロン区切りの、色の値 (16 進数) のリスト。 ユーザーが色を選択できるパレットを表します。 |
color-names |
リスト内の各色に対する、分かりやすい名前の並列リスト。 |
show-labels |
これが指定された場合、 現在選択されている色の名前が、 カラー・スウォッチの上部にある入力フィールドに表示されます。 省略された場合は、名前は表示されません。 入力フィールドには、 現在選択されている色を示すカラー・スウォッチのみが表示されます。 アクセシビリティの関係上、 すべての場合において、色の名前は入力フィールドに存在します。 このオプションは、その名前を可視状態にするだけですので、 注意してください。 |
"#FDDDCE";"#FFD990";"#FFF799";"#C4DF9B";"#B3FFB2";"#7FCBAE";"#81D3EB";"#ADCDEC";"#D3B6D7";"#FCDEE0"; "#CC6666";"#FF9900";"#D3BD2A";"#8FB73E";"#6DB286";"#4F9BAA";"#6D9AB4";"#6F85C2";"#897AB9";"#B7798E"; "#ED1C24";"#FF6600";"#FFFF00";"#9ACA3C";"#00FF00";"#00FFFF";"#0000FF";"#4F57A6";"#800080";"#FF00FF"; "#FFFFFF";"#F2F2F2";"#E5E5E5";"#D9D9D9";"#CCCCCC";"#B3B3B3";"#999999";"#808080";"#666666";"#000000";
ピッカーの CSS は複雑です。入力タグに適用されるクラスは入力フィールドをスタイル設定し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定します。2 番目の独立したクラスのセットは、 ポップアップをスタイル設定します。css-prefix 属性を使用して個々のポップアップの表示を オーバーライドしない限り、このクラスのセットは、ページ内のすべてのポップアップに適用されます。 ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の基底クラス名があり、 ポップアップのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。
デフォルトでは、ポップアップは、基底クラス inputColor_ColorPicker を使用してスタイル設定されます。 css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。
再度記述すると、入力フィールドで指定されるクラスは、入力フィールドおよび関連付けられたボタンを スタイル設定します。個々のコンポーネントで css-prefix 属性が指定されない限り、 ページ内のすべての色指定ポップアップはクラス inputColor_ColorPicker (および関連付けられたサブクラス) によって スタイル設定されます。
属性名 |
説明 |
---|---|
base_ColorPicker |
ポップアップを含む最外部の div のスタイルを設定します。 原則として、このクラスの高さと幅のプロパティーを、 明示的に設定することはできません。 その代わり、グリッド・セルのサイズを指定すると、 グリッド・セルのサイズに基づいて、 ポップアップのサイズが自動的に変更されます。 |
<base>_ColorPicker-Body |
ポップアップをグリッドに編成する、 最外部の表のスタイルを設定します。 |
<base>_ColorPicker-GridCell |
個々のグリッド (表の) セルのスタイルを、表内に設定します。 |
<base>_ColorPicker-GridSwatch |
グリッド・セル内にある カラー・スウォッチのスタイルを、個別に設定します。 |
<base>_ColorPicker-GridCell-Selected |
現在選択されている色を 表す、(1 つの) グリッド・セルのスタイルを指定します。 |
<base>_ColorPicker-GridCell-Hover |
キーボードまたはマウスのいずれかで フォーカスされている、グリッド・セルのスタイルを指定します。 |
<base>_ColorPicker-GridCell-Hover-Selected |
キーボードまたはマウスでフォーカスされていて、 かつ選択されているグリッド・セルのスタイルを指定します。 |
API 呼び出し |
説明 |
---|---|
redraw() |
基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。 |
uirelease() |
コンポーネントに関連付けられたアクティブ UI をリリースします。 |
setValue(string) |
コンポーネントの値を設定し、提供された値が有効であることを確認します。 |
object = getValue(boolean) |
コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。 |
object = setAttribute(attribute) |
属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。 |
string = getAttribute(attribute-name) |
属性の現行値を取得します。 |
カラー・ピッカーは完全に キーボードでアクセス可能です。コンボ・ボックスと同様に、入力エリアおよび ピッカー・ボタンは、タブ順序内の単一エンティティーとして処理されます。コンポーネントに フォーカスがある場合、上矢印キーまたは下矢印キーのいずれかを押すと、 ポップアップが開きます (さらに、フォーカスをそこへ移動します)。ポップアップにフォーカスがある場合、 スペース・バーまたは改行を押すと、(ポップアップが閉じて、フォーカスがコンポーネントに戻されて) 現在選択されている色が選択されます。ESC を押すとポップアップが閉じ、フォーカスがコンポーネントに戻され、 値は変更されません。左、右、上、および下矢印を押すと、フォーカスを持つスウォッチが 変わります。Home、PgUp、End、 PgDn を押すと、フォーカスがパレットの最初/最後の色に移動します。
カラー・ピッカーでは 現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。 これは早急に追加されます。
32 色のカラー・ピッカーを ページに追加します。最初は、白が選択されています。
<input type="text" id="form1:text01" class="inputColor" size="20" value="#FFFFFF" /> <script> hX.addComponent("form1:text01", new hX.JSFColorPicker( "colors:#FDDDCE;#FFD990;#FFF799;#C4DF9B;#B3FFB2;#7FCBAE;#81D3EB;#ADCDEC;#D3B6D7;#FCDEE0;#CC6666;#FF9900;#D3BD2A;#8FB73E;#6DB286;#4F9BAA;#6D9AB4;#6F85C2;#897AB9;#B7798E;#ED1C24;#FF6600;#FFFF00;#9ACA3C;#00FF00;#00FFFF;#0000FF;#4F57A6;#800080;#FF00FF;#FFFFFF;#F2F2F2;#E5E5E5;#D9D9D9;#CCCCCC;#B3B3B3;#999999;#808080;#666666;#000000", "color-names:pale red;pale orange;pale yellow;pale avocado;pale green;pale cyan;pale blue;pale cerulean;pale purple;pale magenta;dull red;dull orange;dull yellow;dull avocado;dull green;dull cyan;dull blue;dull cerulean;dull purple;dull magenta;red;orange;yellow;avocado;green;cyan;blue;cerulean;purple;magenta;white;very pale gray;pale gray;very light gray;light gray;gray;medium gray;dark gray;very dark gray;black")); </script>