複合コンポーネントは <input> タグと同じサイズおよび形状を持ち、入力フィールドは、それに設定されたその他の設定 (例えば入力支援) を保持します。
コンポーネントは、NumberConverter と同じ数値を処理します。
JSFSlider コンポーネントは <input> フィールドにヘルパー・ボタンを追加します。このフィールドは、スライダーの表示をポップアップするために使用され、それからスライダーを使用して数値を選択することができます。
ヘルパー・ボタンは、入力フィールドの右側に追加されます。入力フィールドは、ボタンが取り込まれた後も、元の特性が (正確に) すべて保持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。このボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。
スライダーを含むポップアップの振る舞いは、「通常の」Windows® ポップアップと同じです。すなわち、ポップアップ以外の場所をクリックすると、ポップアップが非表示になり、値は変更されません。 ポップアップ内でマウスを押すと、「スタイラス」が一番近い目盛りに移動し、マウスを動かすことによってスタイラスが別の値に移動します。 マウス・ボタンを放すと、値が選択されます。スライダーでの選択は常に「目盛りの印に対して」行われます。つまり、スライダーは連続していません (2 つの目盛り間の値を選択することはできません)。
ポップアップは通常、入力フィールドの下に、左端を揃えて表示されます。 ポップアップが入力フィールドの下に「合わない」場合 (つまり、入力フィールドがウィンドウの下部近くにある場合) は、入力フィールドの上に表示されます。
ポップアップおよびスライダーのすべての部分は (CSS によって) スタイル設定できますが、スライダーのサイズはスタイル設定できません。スライダーの幅は、スライダーを作成する際に指定する属性によって明示的に設定できます。 スライダーの高さは内容に基づき計算されます。
JSFSlider には NumberConverter が必要です。コンバーターは、入力フィールドの値 (ストリング) を JavaScript™ 数値オブジェクトに変換する場合、またはその逆を行う場合に使用されます。また、コンバーターはスライダーに表示される数値ラベルのフォーマット設定にも使用されます。 コンバーターを構成してからスライダーを構成し、 コンバーターの ID をスライダーに渡す必要があります。 入力フィールドには、NumberValidator や NumberAssist コンポーネントが関連付けられる場合があります。バリデーターが入力フィールドに関連付けられている場合、これは (コンストラクターの属性として) JSFSlider に渡される必要があります。スライダーの最小および最大の境界を構成するには、バリデーターを使用します。このため、バリデーターを指定することを強くお勧めします。 支援が入力フィールドに関連付けられている場合、JSFSlider と関連付ける必要はありません。
<hx:inputText>
<input type="text">
スライダーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合は、スライダーには初期値がありません。
型テキストの入力に関連付けられたすべての属性が サポートされています。
型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。
hX_5.addComponent("id", new hX_5.JSFSlider(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
converter |
構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。 |
validator |
構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。 |
css-prefix |
カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。 |
increment |
スライダーの「目盛り」間の増加量。 例えば、最小値が 1 で最大値が 10 のスライダーの場合、 増加量を 1 にすると、 その目盛りは 1、2、3、4、5、6、7、8、9、10 となります。 スライダー内では、目盛りが付いた値のみを選択できます。 小数 (例えば .01) を値に取ることができます。 |
label-increment |
目盛りの下にラベルを描く間隔。 値 1 の場合は、目盛りごとにラベルが描かれます。 値 2 の場合は、1 つおきに目盛りにラベルが描かれます。 |
show-labels |
これが指定された場合、 現在選択されている色の名前が、 カラー・スウォッチの上部にある入力フィールドに表示されます。 省略された場合は、名前は表示されません。 入力フィールドには、 現在選択されている色を示すカラー・スウォッチのみが表示されます。 アクセシビリティの関係上、 すべての場合において、色の名前は入力フィールドに存在します。 このオプションは、その名前を可視状態にするだけですので、 注意してください。 |
scale-width |
スケールの幅 (ピクセル単位)。 |
button-border |
入力フィールドに対するポップアップ・ボタンの表示方法を制御します。 |
button-color |
ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。 |
スライダーに対する CSS はほとんどありません。入力タグに適用されるクラスは入力フィールドをスタイル設定 (例えば、入力フィールドの境界線を設定) し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定 (入力フィールドの境界線に一致するように設定) します。2 番目のクラス・セットはポップアップ・スライダーをスタイル設定します。ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の「基底クラス名」があり、 スライダーのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。デフォルトでは、スライダーは、基底クラス inputText_Slider を使用してスタイル設定されます。css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。
CSS クラス名 |
説明 |
---|---|
base_Slider |
スライダーを含む div のスタイルを設定します。 div のサイズ (幅/高さ) を設定しても、 スライダーのサイズは変更されない (スケールやポップアップも同様) ので、 注意してください。 幅を変更するには、scale-width 属性を使用してください。 ここでは、常に高さが計算対象となります。 クラスのフォント・プロパティーを使用すると、 スライダー内のテキストのスタイルを設定できます。 |
<base>_Slider-Body |
スライダーのスケールとスタイラス (コンテンツ) の スタイルを設定します。 色のプロパティーを使って、スケールに色を付けます。 スタイラスのスタイル設定は、 背景の色と境界線の設定によって行います。 |
API 呼び出し |
説明 |
---|---|
redraw() |
基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。 |
uirelease() |
コンポーネントに関連付けられたアクティブ UI をリリースします。 |
setValue(string) |
コンポーネントの値を設定し、提供された値が有効であることを確認します。 |
object = getValue(boolean) |
コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript の 日付/時刻オブジェクトとして、値が戻されます。 |
object = setAttribute(attribute) |
属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。 |
string = getAttribute(attribute-name) |
属性の現行値を取得します。 |
スライダーは完全にキーボードによるアクセスが可能です。 入力フィールドとピッカー・ボタンはどちらも、タブ順序に組み込まれています。 入力フィールドでは、上下矢印キーを使用して、増分ごとに値を増加/減少させることができます。上下矢印キーを押すと、そのキーが放されるまで、増分ごとに値が「スピン」します。 ボタンにフォーカスがある場合、スペース・バーを押すとスライダーが表示され、フォーカスは「スタイラス」に移動します。 スライダーにフォーカスがある場合、スペース・バーを押すと現行値が選択されます (ポップアップが閉じ、フォーカスはボタンに戻ります)。ESC を押すとポップアップが閉じ、フォーカスがボタンに戻って値は変更されないままになります。 左右矢印キーを押すと値が変更されます。
スライダーでは現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。これは早急に追加されます。
数値の形式がパーセントであるフィールドにスライダーを追加します。 スライダーが 0 から 100% の値を含むように制限します。目盛りが 1 パーセントごとに描画され、ラベルが 10 パーセントごとに描画されるように指定します。 指定した CSS クラスを使用して、立体の影が付いたモノクロのスライダーを描画します。
<style> .inputText1_Slider { background-color:white; border:1px; border-style:solid; border-color:windowframe; font-family: sans-serif; font-decoration: none; color: black; outline-color: gray; outline-width: 4px; -moz-outlineColor: #E4E4E5; -moz-outline-width: 4px; } .inputText1_Slider_Body { background-color:silver; color: threedshadow; border-style:solid; border-color:threedhighlight; border-right-color:threedShadow; } </style> <script> hX.addConverter("x1", new hX.NumberConverter("strict:1", "pattern:##0%", "locale:,.%‰-$")); hX.addValidator("x1", new hX.NumberValidator( "min-bound:0.0", "max-bound:1.0", "required:true")); hX.addComponent("form1:text1", new hX.JSFSlider("css-prefix:inputText1", "increment:.01", "label-increment:10","converter:x1","validator:x1")); </script>