【Adobe Spry TIPS】 HTMLを取得表示する

Spryの非常に優秀な機能でTHMLファイルから一部分を切り取りデータセットに格納する機能があります。

利用するのはSpryHTMLDataSet.js。

RSSやCSVの時と同様にSpryData.jsとSpryHTMLDataSet.jsを読み込みます。

<script type="text/javascript" src="./includes/SpryHTMLDataSet.js"></script>
<script type="text/javascript" src="./includes/SpryData.js"></script>

特定のファイルから特定のIDを持つ要素を取得

一番簡単なサンプルとしてidが指定された要素を取得する方法です

データセットへの格納は

<script type="text/javascript" >
var HTMLData = new Spry.Data.HTMLDataSet("取得するファイル", "取得する要素");
</script>

としてます。

サンプルとして当サイトのid=mainを取得する場合は

<script type="text/javascript" >
var HtmlData = new Spry.Data.HTMLDataSet("/index.html", "main");
</script>

と記述します。

表示部分は、spry:regionで表示するデータセットを指定。
その内側に{column0}と記述して格納したデータを出力します。

<div spry:region="HtmlData">
	{column0}
</div>

サンプル

特定の要素を取得

idが付けられていない要素を取得する場合はdataSelectorを利用します。

var HtmlData = new Spry.Data.HTMLDataSet("/index.html", "main",{dataSelector:"h2"});

このようにオプションでさらに細かい要素やclassを指定できます。

サンプル

id=main内には複数のh2要素が配置されているにもかかわらず先のサンプルだと最初の一つしか表示されていません。

これはそれぞれのh2要素に別々の表示名が与えられているからです。

表示部部を

<ul spry:region="HtmlData">
	<li>{column0}</li>
	<li>{column1}</li>
	<li>{column2}</li>
	<li>{column3}</li>
	<li>{column4}</li>
	<li>{column5}</li>
	<li>{column6}</li>
	<li>{column7}</li>
	<li>{column8}</li>
	<li>{column9}</li>
</ul>

と変更することによりすべてのh2要素を表示することが可能になります。

サンプル

これだと非常にめんどくさいので繰り返し領域の取得にはrowSelectorを利用します。

var HtmlData = new Spry.Data.HTMLDataSet("/index.html", "main",{rowSelector:"h2"});

rowSelectorを利用することにより、spry:repeatを利用して繰り返し領域を簡単に表示することができます。

<ul spry:region="HtmlData" spry:repeat="HtmlData">
	<li>{column0}</li>
</ul>

サンプル

【Adobe Spry TIPS】 目次

スポンサードリンク

«【Adobe Spry TIPS】 アコーディオン | メイン | 【Adobe Spry TIPS】 コラプシブルパネル»