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