Jun 15

[原]Spry框架:效果应用 阴

linuxing , 12:45 , 编程 » JavaScript , 评论(0) , 引用(0) , 阅读(18502) , Via 本站原创 | |
    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,并允许设置参数。
例如,添加“显示/渐隐”的效果。
可用鼠标选中某段文字后,在“标签”面板—行为中添加效果:
点击在新窗口中浏览此图片
在弹出的菜单中,可以设置该效果相关的参数值:
点击在新窗口中浏览此图片
确认后,会自动在HTML代码中添加以下内容:

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

演示:
Windows Media Player文件

代码下载:
Tags:
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]