チェックボックス検査 Widget の挿入
-
"SpryValidationCheckbox.js" ファイルを検索して、Web サイトに追加します。 "SpryValidationCheckbox.js" ファイルは、Adobe Labs からダウンロードした Spry ディレクトリにある widgets/checkboxvalidation ディレクトリ内で検索できます。 詳細については、ファイルの準備を参照してください。
たとえば、Web サイトのルートフォルダ内に SpryAssets という名前のフォルダを作成し、このフォルダに "SpryValidationCheckbox.js" ファイルをアップロードします。 "SpryValidationCheckbox.js" ファイルには、チェックボックス Widget をインタラクティブにするために必要な情報がすべて含まれます。
- "SpryValidationCheckbox.css" ファイルを検索して、Web サイトに追加します。 このファイルの追加先として、メインディレクトリである SpryAssets ディレクトリ、または CSS ディレクトリがある場合はそのディレクトリを選択できます。
- チェックボックス Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryValidationCheckbox.js" ファイルをリンクします。
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
"SpryValidationCheckbox.js" ファイルへのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- ページのヘッドタグに次の link タグを挿入して、Web ページに "SpryValidationCheckbox.css" ファイルをリンクします。
<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
"SpryValidationCheckbox.css" ファイルへのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- チェックボックスをページに追加し、それらの名前と値を割り当てます。 追加できるチェックボックスの数は制限されていません。
<input type="checkbox" name="checkbox1" value="1"/> <input type="checkbox" name="checkbox2" value="2"/>
- 次のように span タグを input タグの周囲に挿入し、一意の ID を Widget に割り当てることによって、チェックボックスの周囲にコンテナを追加します。
<span id="sprycheckbox1"> <input type="checkbox" name="checkbox1" value="1"/> <input type="checkbox" name="checkbox2" value="2"/> </span>
- Spry チェックボックス検査オブジェクトを初期化するには、次の script ブロックを Widget に対応する HTML コードの後に挿入します。
<script type="text/javascript"> var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1"); </script>new JavaScript 演算子によって、チェックボックス Widget オブジェクトが初期化され、span タグコンテンツが sprycheckbox1 の ID を使用して静的 HTML コードからインタラクティブなチェックボックスオブジェクトに変換されます。 Spry.Widget.ValidationCheckbox メソッドは、チェックボックスオブジェクトを作成する Spry フレームワークのコンストラクタです。 このオブジェクトを初期化するために必要な情報は、この手順の開始時にリンクした SpryValidationCheckbox.js JavaScript ライブラリに含まれています。
チェックボックス Widget のコンテナの span タグの ID が Spry.Widgets.ValidationCheckbox メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。
- ページを保存します。
コード全体を次に示します。
<head> ... <script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" /> </head> <body> <span id="sprycheckbox1"> <input type="checkbox" name="checkbox1" value="1"/> <input type="checkbox" name="checkbox2" value="2"/> </span> <script type="text/javascript"> var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1"); </script> </body>