Spry学习(一)----XML数据集及显示

来源:互联网 发布:淘宝无线端首页装修psd 编辑:程序博客网 时间:2024/05/22 10:40

简介
        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

<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>
原创粉丝点击