Spryを使ったHTML上でXMLの読み込み
Spryを使用したHTMLでXMLを読み込む方法をご紹介します。
そもそもSpryはAdobe Systems社が開発したAjaxフレームワーク(JavaScriptライブラリ)で、今回紹介するXML形式のデータを読み込むことはもちろん、Widgetの作成など様々な機能があります。
デモ
No | 名前 | ローマ字 |
---|---|---|
{@id} | {text} | {kana} |
次のXMLファイルのデータを表形式で表示しています。
xml_spry.xml
ダウンロードと設置
こちらからダウンロードして解凍します。
ただし、ダウンロードは無料のAdobe会員になっている必要がありますのでご注意ください。
解凍後、includesディレクトリを任意の場所に設置します。
JavaScriptの読み込み
次のHTMLをhead要素内に記述します。
HTML
適用方法
table要素で適用を行う場合はdiv等でtableを囲み、spry:region="DataSetID名"をdivに設定します。
また、表示したい部分に{要素名}という形で記述します。
※ 次のコードにある@idは、要素名に付加されているidを取得するためのものです。
HTML
次に読み込むXMLと出力する部分の設定をします。
上記の場合1つしか表示されないので、繰り返し処理をする場合は、
spry:repeat="DataSetID名"をtrに設定します。
ソート(並び替え)
ソートしたい見出しタグにspry:sort="要素名"を設定します。