Spry セレクト検証 Widget の操作

検索
注意：

Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。

セレクト検証 Widget について

Spry セレクト検証 Widget は、ユーザーが選択すると有効状態または無効状態が表示されるドロップダウンメニューです。例えば、あるセレクト検証 Widget に含まれるリストが、横線で区切ってグループ化されているとします。このときユーザーが誤って区切りの横線を選択すると、その選択が無効であることを示すメッセージが返されます。

次に、展開されたセレクト検証 Widget の例と、様々な状態の折りたたまれたセレクト検証 Widget の例を示します。

セレクト検証 Widget

A. フォーカスがあるときのセレクト検証 Widget B. セレクト Widget、有効状態 C. セレクト Widget、必須状態 D. セレクト Widget、無効状態 

セレクト検証 Widget には、有効、無効、必須などのいくつかの状態が含まれます。これらの状態のプロパティは、使用する検証結果に応じて、プロパティインスペクターで変更できます。検証が実行されるタイミングは、例えばユーザーが Widget の外側をクリックしたとき、選択したとき、フォームを送信しようとしたときなど、様々に設定できます。

イニシャル状態

ページがブラウザーに読み込まれたとき、またはユーザーがフォームをリセットしたときの Widget の状態。

フォーカス状態

ユーザーがクリックしたときの Widget の状態。

有効状態

ユーザーが有効な項目を選択し、フォームを送信できる状態になったときの Widget の状態。

無効状態

ユーザーが無効な項目を選択したときの Widget の状態。

必須状態

ユーザーが有効な項目を選択し忘れたときの Widget の状態。

ユーザーとのインタラクションの中で、セレクト検証 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。例えば、ユーザーがフォームを送信しようとしてメニューから項目が選択されていなかった場合に、「項目を選択してください。」というエラーメッセージが表示されるように Widget にクラスが適用されます。エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する SpryValidationSelect.css という CSS ファイルに存在します。

セレクト検証 Widget の初期設定 HTML は、通常はフォームの内部に配置され、テキストエリアの <select> タグを囲むコンテナ <span> タグで構成されます。セレクト検証 Widget の HTML には、ドキュメントの head 内とこの Widget の HTML マークアップの後の script タグも含まれます。

セレクト検証 Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_spryselect_jp を参照してください。

セレクト検証 Widget の挿入と編集

セレクト検証 Widget の挿入

  1. 挿入／Spry／Spry セレクト検証を選択します。
  2. Input タグのアクセシビリティ属性ダイアログボックスに情報を入力し、「OK」をクリックします。
  3. コードビューで、メニュー項目と値を含むオプションタグを追加します。Dreamweaver ではこれは自動的には行われません。詳しくは、前のトピックを参照してください。
注意：

挿入パネルの「Spry」カテゴリを使用してセレクト検証 Widget を挿入することもできます。

検証を実行するタイミングの指定

検証がどの時点で実行されるかを指定できます。指定できるのは、ユーザーが Widget の外側をクリックしたとき、ユーザーが入力すると同時、またはユーザーがフォームの送信を試みたときのいずれかです。

  1. ドキュメントウィンドウで、セレクト検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、検証をどの時点で行うかを指定するオプションを選択します。すべてのオプションを選択することも、「送信」のみを選択することもできます。

    onBlur

    ユーザーが Widget の外側をクリックしたときに常に検証します。

    onChange

    ユーザーが選択したときに検証します。

    onSubmit

    ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。

デザインビューでの Widget の状態の表示

  1. ドキュメントウィンドウで、セレクト検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、有効状態でこの Widget を表示する場合は「有効」を選択します。

空白値の禁止または許可

初期設定では、Dreamweaver で挿入したセレクト検証 Widget を Web ページでパブリッシュすると、値を関連付けられたメニュー項目の選択が必須になります。ただし、このオプションを無効にすることもできます。

  1. ドキュメントウィンドウで、セレクト検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「禁止」の「空白の値」チェックボックスを必要に応じてオンまたはオフにします。

無効な値の指定

関連付けられたメニュー項目をユーザーが選択すると無効とされる値を指定できます。例えば、無効な値として -1 を指定し、その値をオプションタグに割り当てると、ユーザーがメニュー項目を選択したときに Widget はエラーメッセージを返します。

<option value="-1"> ------------------- </option>
  1. ドキュメントウィンドウで、セレクト検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「無効な値」ボックスに数値を入力します。

セレクト検証 Widget のカスタマイズ

プロパティインスペクターでは、セレクト検証 Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。セレクト検証 Widget の CSS を変更すると、自由にスタイル設定した Widget を作成できます。

次のトピックに登場する CSS ルールは、すべて SpryValidationSelect.css ファイルに格納された初期設定ルールです。Spry セレクト検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryValidationSelect.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。

注意：

セレクト検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して Widget の CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。

セレクト検証 Widget のエラーメッセージのテキストのスタイル設定

セレクト検証 Widget のエラーメッセージは、初期設定では、1 ピクセルのボーダーで囲まれた赤いテキストで表示されます。

  1. セレクト検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。

    スタイルを設定するテキスト

    関連する CSS ルール

    変更する関連プロパティ

    エラーメッセージのテキスト

    		 .selectRequiredState .selectRequiredMsg、.selectInvalidState .selectInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

セレクト検証 Widget の背景色の変更

  1. 様々な状態のセレクト検証 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定の背景色値を変更します。

    変更する背景色

    関連する CSS ルール

    変更する関連プロパティ

    有効状態の Widget の背景色

    		 .selectValidState select、select.selectValidState

    background-color: #B8F5B1;

    無効状態の Widget の背景色

    		 select.selectRequiredState、.selectRequiredState select、select.selectInvalidState、.selectInvalidState select

    background-color: #FF9F9F;

    フォーカスがある Widget の背景色

    		 .selectFocusState select、select.selectFocusState

    background-color: #FFFFCC;

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン

クイックリンク

すべてのプランを表示 プランを管理

リーガルノーティス    |    プライバシーポリシー