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