選択検査 Widget の挿入

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

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

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

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

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

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

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

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

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

選択リストをページに追加し、名前と一意の ID を指定します。

<select name="myselect" id="myselect"></select>

次のように、選択リストにオプションを追加します。

<select name="myselect" id="myselect">
	<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>

選択リストの周囲にコンテナを追加するには、span タグを select タグの周囲に挿入し、次のように一意の ID を Widget に割り当てます。

<span id="spryselect1">
	<select name="myselect" id="myselect">
		<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>
</span>

Spry 選択検査オブジェクトを初期化するには、次の script ブロックを Widget に対応する HTML コードの後に挿入します。

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

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

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

ページを保存します。

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

<head> 
... 
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
	<span id="spryselect1">
		<select name="myselect" id="myselect">
			<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>
	</span>
<script type="text/javascript">
	var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
</script>
</body>