Spry Framework入门(一)——XML数据集及显示
简介:
Spry Framework是Adobe出品的轻量级的支持Ajax的JavaScript库,以HTML为中心,使用最基本的HTML、CSS和JavaScript来实现丰富Web页面体验。
安装:
从http://labs.adobe.com/technologies/spry/ 下载安装包,目前版本为Spry_P1_3_08-11.zip,解开后把includes目录复制到自己的IIS虚拟目录上即可。
页面代码:
data.xml
1<?xml version="1.0" encoding="UTF-8"?>
2<specials>
3 <menu_item id="1">
4 <item>夏日沙拉</item>
5 <description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description>
6 <price>7</price>
7 <url>summersalad.xml?id=1</url>
8 </menu_item>
9 <menu_item id="2">
10 <item>Thai Noodle Salad</item>
11 <description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description>
12 <price>8</price>
13 <url>thainoodles.xml</url>
14 </menu_item>
15 <menu_item id="3">
16 <item>Grilled Pacific Salmon</item>
17 <description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description>
18 <price>16</price>
19 <url>salmon.xml</url>
20 </menu_item>
21</specials>
test.html
2<specials>
3 <menu_item id="1">
4 <item>夏日沙拉</item>
5 <description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description>
6 <price>7</price>
7 <url>summersalad.xml?id=1</url>
8 </menu_item>
9 <menu_item id="2">
10 <item>Thai Noodle Salad</item>
11 <description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description>
12 <price>8</price>
13 <url>thainoodles.xml</url>
14 </menu_item>
15 <menu_item id="3">
16 <item>Grilled Pacific Salmon</item>
17 <description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description>
18 <price>16</price>
19 <url>salmon.xml</url>
20 </menu_item>
21</specials>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spry Example</title>
<!--Link the Spry libraries-->
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<!--Create a data set object-->
<script type="text/javascript">
var dsSpecials = new Spry.Data.XMLDataSet("data.xml", "specials/menu_item");
</script>
</head>
<body>
<!--Create the Spry dynamic region-->
<div id="Specials_DIV" spry:region="dsSpecials">
<!--Display the data in a table-->
<table id="Specials_Table">
<tr>
<th>名称</th>
<th>Description</th>
<th>价格</th>
</tr>
<tr spry:repeat="dsSpecials">
<td>{item}</td>
<td>{description}</td>
<td>{price}</td>
</tr>
</table>
</div>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spry Example</title>
<!--Link the Spry libraries-->
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<!--Create a data set object-->
<script type="text/javascript">
var dsSpecials = new Spry.Data.XMLDataSet("data.xml", "specials/menu_item");
</script>
</head>
<body>
<!--Create the Spry dynamic region-->
<div id="Specials_DIV" spry:region="dsSpecials">
<!--Display the data in a table-->
<table id="Specials_Table">
<tr>
<th>名称</th>
<th>Description</th>
<th>价格</th>
</tr>
<tr spry:repeat="dsSpecials">
<td>{item}</td>
<td>{description}</td>
<td>{price}</td>
</tr>
</table>
</div>
</body>