[原]Spry框架：效果应用
•
linux专区 •
阅读 164
Ajax Spry框架是一个JavaScript库，Web涉及人员使用它可以构建能够向站点访问者提供更丰富体验的Web页。Spry框架主要包括Spry效果、Spry构件及XML数据访问。Spry效果是一种视觉增强功能，是一种增强网站外观的简洁而优美的方式。
Spry效果通过客户端JavaScript作用于HTML页面元素就可以实现，不需要复杂恶语法，也不需要任何自定义的新标记。下面以举Spry效果的一个例子来做简要说明。
一、Spry 效果
Spry效果是一种视觉增强功能，可以应用于使用JavaScript的HTML页面上的几乎所有元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。
若要对某个元素应用Spry效果，要求该元素当前必须具有一个ID。若该元素还没有有效的ID值，则需要向HTML代码中添加一个ID值。
Spry效果仅仅涉及驻留在客户端的JavaScript方法和函数，不需要任何服务器端逻辑或脚本。因此，当用户浏览一个HTML网页并引发一个效果时，只有应用该效果的对象进行动态更新，而不会刷新整个HTML页面。
二、Spry效果的结构
一个Spry效果包含以下三个组成部分：
引用
a、该效果的JavaScript对象本身（不可见的）；
b、引发该效果的一个页面元素；
c、应用该效果的一个页面元素。
1、效果的JavaScript对象本身
当应用Spry效果时，Dreamweaver会在代码视图中将不同的代码添加到文档中。在文档首部通过script标记来标识SpryEffects.js文件：
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
JavaScript脚本库SpryEffects.js是所有Spry效果的支持文件，是生成这些效果所必须的。不要从代码中删除这些标记，否则这些效果将不起作用。
2、引发该效果的页面元素
通过把一个事件处理程序（如onclick）附加到一个页面元素（如按钮）上来引发效果：
<input type="button" onclick="fadeEffect.start();" value="示例" />
在这个事件处理程序中，使用由对应效果创建的实例（见下面）的start()方法来引发效果，调用该方法的语法为：variableName.start()。
3、应用的页面元素
<div id="div1">
测试文本
</div>
<script type="text/javascript">
var fadeEffect=new Spry.Effect.Fade("div1",{toggle:true});
</script>
这里，通过JavaScript给指定的div元素应用淡入淡出的效果，效果构造函数中的第一个参数值是div容器的id，该容器包含要淡入淡出的文字。这两个值必须匹配。第二个参数值是该对象的可选参数，通过一个对象直接量的方式输入提供这些参数的具体值。
通过该构造函数创建的实例变量（fadeEffect）可以是任意的，但在上面引发该效果时使用的变量名必须与它匹配。
※ 注意，由于需要把被作用于的容器元素作为参数，在构造函数创建实例时调用，因此，该创建实例的代码，必须在对应HTML元素（如div容器）之后，否则会提示找不到对象的JavaScript错误。
三、通过可视化方式创建效果
在Dreamweaver CS3中，可以通过可视化的操作添加效果。操作的目标可针对当前选定的内容，或指定的ID，并允许设置参数。
例如，添加“显示/渐隐”的效果。
可用鼠标选中某段文字后，在“标签”面板—行为中添加效果：
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!–
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//–>
</script>
</head>
<body>
<p onclick="MM_effectAppearFade(this, 1000, 100, 20, true)">这是一个文本段落，单击上面的上面的按钮可以实现文字淡入淡出效果。</p>
</body>
这里添加的MM_effectAppearFade函数利用Spry 1.6提供的包装函数Spry.Effect.DoFade，即触发和显示的为同一个页面元素。点击该段文字后，即会显示对应的效果。
四、通过编写代码创建效果
手动编写代码，可以更好的控制页面元素，例如把触发和显示的元素分开。下面的代码是一个简单的例子：
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="fade.start();return false;" href="#">查看淡入淡出效果</a></p>
<div id="div1">这是一个文本段落，单击上面的上面的按钮可以实现文字淡入淡出效果。</div>
<script type="text/javascript">
var fade=new Spry.Effect.Fade("div1",{duration:1000,from:"100",to:"20",toggle:true});
</script>
</body>
这里，就把触发效果和显示效果的页面元素完全独立开来，并且在由构造函数创建实例时，通过{options:value}定义对象直接量的方式赋予参数值。
显示页面：
五、组合效果
Spry可以把多个效果组合在一起，从而创建一个新的效果。根据添加效果所用的方法，组合中各个效果有两种运行方式，一种是并行运行方式，即多个效果同时运行；另一种是顺序运行方式，即一个效果只能在前面的效果结束后才能运行。
这需要用到Spry效果库中的JavaScript类Cluster，其名称为Spry.Effect.Cluster。要创建一个组合效果，需要对该类进行扩展，以生成一个新类。
构造方法必须接受element和options两个参数，分别表示要应用该效果的目标元素和各种动画效果选项：
<script type="text/javascript">
ClusterEffect=function(element,options) {
Spry.Effect.Cluster.call(this,options);
};
ClusterEffect.prototype=new Spry.Effect.Cluster();
ClusterEffect.prototype.constructor=ClusterEffect;
然后，定义用于覆盖默认选项的效果选项，当在上述构造方法中添加自定义选项时使用这些效果选项，并创建要添加到组合效果中的两种或多种效果。
通过调用原始Cluster类的方法向组合效果中注册各种效果。
◎ 若要以并行方式运行效果，可调用addParallelEffect方法：
this.addParallelEffect(effect);
◎ 若要以顺序方式运行效果，可调用addNextEffect方法：
this.addNextEffect(effect);
其中，effect表示要添加到组合效果中的效果对象。
示例代码：（留意如何利用对象直接量传递参数）
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
ShakeFadeGrow=function (element,options) {
Spry.Effect.Cluster.call (this,options);
var duration=1000;
var from=0;
var to=100;
var toggle=false;
var transition=Spry.fifthTransition;
if (options) {
if (options.duration != null) duration=options.duration;
if (options.from != null) from=options.from;
if (options.to != null) to=options.to;
if (options.toggle != null) toggle=options.toggle;
if (options.transition != null) transition=options.transition;
}
var shakeEffect=new Spry.Effect.Shake(element,{duration:duration});
var fadeEffect=new Spry.Effect.Fade(element,{duration:duration,from:from,to:to,transition:transition,toggle:toggle});
var growEffect=new Spry.Effect.Grow(element,{duration:duration,from:from,to:to,transition:transition,toggle:toggle});
this.addParallelEffect(shakeEffect);
this.addNextEffect(fadeEffect);
this.addParallelEffect(growEffect);
};
ShakeFadeGrow.prototype=new Spry.Effect.Cluster();
ShakeFadeGrow.prototype.constructor=ShakeFadeGrow;
</script>
<style type="text/css">
#div1 {
width:28em;
background-color:#CCFF33;
height:4em;
padding:0.5em;
border: 1px solid;
}
</style>
</head>
<body>
<a onclick="sfgEffect.start();return false;" href="#">查看组合效果应用示例</a></p><br />
<div id="div1">这是一个文本段落，单击上面的链接可以实现文字晃动、显示/渐隐和增大/收缩的组合效果。组合效果开始时，先左右晃动3秒钟，然后显示/渐隐效果和增大/收缩效果是并行运行3秒钟，动画效果总共持续了6秒钟。</div>
<script type="text/javascript">
var sfgEffect=new ShakeFadeGrow("div1",{from:"0%",to:"100%",duration:3000,toogle:true});
</script>
</body>
演示：
代码下载：
![[原]Spry框架：效果应用](http://www.linuxfly.org/template/meSimple/images/download.gif)
下载文件
点击这里下载文件
[转]Spry框架初步入门
Spry框架：重载XML数据集，更新动态表格
Spry框架：XML数据集
Spry框架：表单验证构件
Spry框架：构件应用
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/linux/105111.html
![[原]Spry框架：效果应用](http://www.linuxfly.org/template/meSimple/images/wmp.gif)
Windows Media Player文件