チェックボックス検査 Widget の概要と構造
Spry チェックボックス検査 Widget は、ユーザーが HTML コードフォーム内のあるチェックボックスを選択したとき、または選択しなかったときに、有効状態または無効状態を表示する (単独またはグループの) チェックボックスです。 たとえば、ユーザーが 3 つのオプションを選択する必要があるフォームにチェックボックス検査 Widget を追加します。 ユーザーが 3 つのオプションを選択していない場合は、最小選択数が満たされなかったことを示すメッセージが返されます。
さまざまな状態のチェックボックス検査 Widget の例を次に示します。
チェックボックス検査 Widget には、有効、無効、必須などのいくつかの状態が含まれます。 これらの状態のプロパティは、使用する検査結果に応じて、プロパティインスペクタを使用して変更できます。 検査が実行されるタイミングは、さまざまに設定できます。たとえば、ユーザーが Widget の外側をクリックしたとき、選択したとき、フォームを送信しようとしたときなどに設定できます。
- 初期状態
- ページがブラウザに読み込まれたとき、またはユーザーがフォームをリセットしたとき。
- 有効状態
- ユーザーが適切な数のオプションを選択し、フォームを送信できるようになったとき。
- 必須状態
- ユーザーが必要な選択を行わなかったとき。
- 最小選択数状態
- ユーザーが選択したチェックボックスの数が必要最小数に満たないとき。
- 最大選択数状態
- ユーザーが選択したチェックボックスの数が許容最大数を超えているとき。
ユーザーとのインタラクションの中で、チェックボックス検査 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。 たとえば、ユーザーがフォームをオプションを選択せずに送信しようとすると、「項目を選択してください。」というエラーメッセージを表示するクラスが Widget に適用されます。 エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する "SpryValidationCheckbox.css" ファイルに存在します。
チェックボックス検査 Widget のデフォルト HTML コードは、通常はフォームの内部に配置され、コンテナ span タグで構成されます。このタグはチェックボックスの input type="checkbox" タグを囲みます。 チェックボックス検査 Widget の HTML コードには、ドキュメントのヘッド内と Widget の HTML コードの後に script タグも含まれます。
チェックボックス検査 Widget の HTML コードには、ドキュメントのヘッド内と Widget の HTML コードの後に script タグも含まれます。 ドキュメントのヘッド内の script タグは、チェックボックス Widget に関連するすべての JavaScript 関数を定義します。 Widget コードの後の script タグは、チェックボックスをインタラクティブにする JavaScript オブジェクトを作成します。
チェックボックス検査 Widget の HTML コードを次に示します。
<head>
...
<!-- Link the Spry Validation Checkbox JavaScript library -->
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
<!-- Link the CSS style sheet that styles the widget -->
<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<!-- Create the checkbox widget and assign a unique id-->
<span id="sprycheckbox1">
<input type="checkbox" name="checkbox1" value="1"/>
<input type="checkbox" name="checkbox2" value="2"/>
<!--Add an error message-->
<span class="checkboxRequiredMsg">Please make a selection.</span>
</span>
</form>
<!-- Initialize the Validation Checkbox widget object-->
<script type="text/javascript">
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1");
</script>
</body>
このコードでは、new JavaScript 演算子によって、チェックボックス Widget オブジェクトが初期化され、span コンテンツが sprycheckbox1 の ID を使用して静的 HTML コードからインタラクティブなページエレメントに変換されます。
Widget 内のエラーメッセージの span タグでは、CSS クラスが適用されています。 このクラス (デフォルトでは display:none; に設定されています) は、エラーメッセージのスタイルと表示状態を制御し、対応する "SpryValidationCheckbox.css" ファイルに存在します。 Widget がユーザーとのインタラクションの結果としてさまざまな状態を入力した場合、Spry は Widget のコンテナにさまざまなクラスを配置し、それによってエラーメッセージクラスに影響を与えます。
その他のエラーメッセージをチェックボックス検査 Widget に追加するには、エラーメッセージのテキストを保持する span タグ (またはその他の種類のタグ) を作成します。 次に、CSS クラスを適用することにより、Widget の状態に応じて、メッセージの表示、非表示を切り替えることができます。
デフォルトのチェックボックス検査 Widget の状態の外観は、"SpryValidationCheckbox.css" ファイル内の対応する CSS ルールを編集することで変更できます。 たとえば、状態の背景色を変更するには、スタイルシートで対応するルールを編集するか (まだルールが存在しない場合は) 新しいルールを追加します。
チェックボックス検査 Widget 構造に使用されるさまざまなタグ
上の例では、span タグによって Widget の構造が作成されます。
Container SPAN INPUT type="checkbox" Error message SPAN
ただし、Widget は、ほとんどすべてのコンテナタグを使用して作成できます。
Container DIV INPUT type="checkbox" Error Message P
Spry では (タグ自体ではなく) タグ ID を使用して Widget が作成されます。 Spry では、エラーメッセージも、エラーメッセージを含めるために使用される実際のタグとは関係のない CSS コードを使用して表示されます。
Widget コンストラクタに渡された ID は特定の HTML エレメントを識別します。 コンストラクタはこのエレメントを検出し、識別されたコンテナ内で対応する input タグを見つけます。 コンストラクタに渡された ID が (コンテナタグではなく) input タグの ID である場合、コンストラクタは検査トリガを直接 input タグに添付します。 ただし、コンテナタグが存在しない場合は、Widget はエラーメッセージを表示できず、さまざまな検査状態によって input タグエレメントの外観 (背景色など) だけが変更されます。