テキスト領域検査 Widget の挿入

"SpryValidationTextarea.js" ファイルを検索して、Web サイトに追加します。 "SpryValidationTextarea.js" ファイルは、Adobe Labs からダウンロードした Spry ディレクトリにある widgets/textareavalidation ディレクトリ内で検索できます。詳細については、ファイルの準備を参照してください。

たとえば、Web サイトのルートフォルダ内に SpryAssets という名前のフォルダを作成し、そのフォルダに"SpryValidationTextarea.js" ファイルをアップロードします。 "SpryValidationTextarea.js" ファイルには、テキスト領域 Widget をインタラクティブにするために必要な情報がすべて含まれます。

"SpryValidationTextarea.css" ファイルを検索して、Web サイトに追加します。このファイルの追加先として、メインディレクトリである SpryAssets ディレクトリ、または CSS ディレクトリがある場合はそのディレクトリを選択できます。

テキスト領域 Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryValidationTextarea.js" ファイルをリンクします。

<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>

"SpryValidationTextarea.js" ファイルへのファイルパスが正しいことを確認します。このパスは、Web サイト内のどこにファイルを配置したかによって異なります。

ページのヘッドタグに次の link タグを挿入して、Web ページに"SpryValidationTextarea.css" ファイルをリンクします。

<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

"SpryValidationTextarea.css" ファイルへのファイルパスが正しいことを確認します。このパスは、Web サイト内のどこにファイルを配置したかによって異なります。

テキスト領域をページに追加し、名前と一意の ID を指定します。

<textarea name="mytextarea" id="textarea"></textarea>

次のように span タグを <textarea> タグの周囲に挿入し、一意の ID を Widget に割り当てることによって、テキスト領域の周囲にコンテナを追加します。

<span id="sprytextarea1">
	<textarea name="mytextarea"></textarea>
</span>

次のスクリプトブロックを Widget に対応する HTML コードの後に挿入して、テキスト領域オブジェクトを初期化します。

<script type="text/javascript">
	var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
</script>

new JavaScript の演算子によって、テキスト領域 Widget オブジェクトが初期化され、span タグコンテンツが sprytextarea1 の ID を使用して静的 HTML コードからインタラクティブなテキストフィールドオブジェクトに変換されます。 Spry.Widget.ValidationTextarea メソッドは、テキスト領域オブジェクトを作成する Spry フレームワークのコンストラクタです。このオブジェクトを初期化するために必要な情報は、この手順の開始時にリンクした JavaScript ライブラリの SpryValidationTextarea.js に含まれています。

テキスト領域のコンテナ span タグの ID が Spry.Widgets.ValidationTextarea メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。

ページを保存します。

コード全体を次に示します。

<head> 
... 
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
	<form id="form1" name="form1" method="post" action="">
		<span id="sprytextarea1">
			<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
		</span>
	</form>
<script type="text/javascript">
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
</script>
</body>