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