Adobe Spry框架入门

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

Spry的目的是成为实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。

作者：builder.com.cn 2007年6月26日

关键字：

Spry效果

虽然Spry效果已经成为框架的一部分，但在1.5版本中有时还是重写了效果库，显著的改变是为了与其它语言更一致改变了很多方法的名称。

Spry效果的目的是对HTML页中的可视元素添加可视效果。这些效果包括动态过渡和内容的高亮显示。我是合理使用能够动画的坚定支持者，我们要尽量少的使用它。但是有时可以使用它指示应用状态。为了给用户较好的反馈，从一个状态到另一个状态的过渡可以巧妙地使用动态效果。

Spry效果包括：

去光效果
褪色效果
发光效果
高亮效果
摇动效果
滑动效果
压扁效果

可以使用Observers合并多个效果，因此，例如一个面板的宽度减小另一个面板的宽度以相同的大小增加，我们就可以对两个面板的转换使用一个滑动效果。

聚类允许效果一个接一个的运行，因此一个面板可以先增加宽度然后再增加高度，而不是像observer那样同时改变。

下面是一个使用了消光效果的HTML页面摘要。这本例中，效果通过单击超链接触发；消光效果将会使得包含文本的div标记逐渐减小高度知道消失为止，从超链接两个方向都会有效。Spry效果库是包含在Spry下载包中标准的一部分。

<title>Spry Effect Example</title>

.animationContainer{

height: 220px;

}

.demoDiv{

height: 200px;

width: 400px;

overflow: hidden;

background-color: #CCCCCC;

}

</style>

</head>

<body>

<a href="#" onclick="blind_toggle.start(); return false;">Blind Example</a>

<br />

<h4>Spry Blind Effect Example</h4>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

erat, sed diam voluptua. At vero eos et accusam et justo duo

dolores et ea rebum. Stet clita kasd gubergren, no sea takimata

sanctus est Lorem ipsum dolor sit amet.

</p>

</div>

<!--

var blind_toggle = new Spry.Effect.Blind('slideItUp2', {toggle:true});

//-->

</script>

Spry and Dreamweaver CS3

Spry 1.4的增强版集成了Dreamweaver CS3,利用标记编辑器使开发变得很容易。例如，Spry数据通过使用Dreamweaver CS3中的对话框可以很容易实现，因为你可以像引入XML模式和预览数据一样做其它事情。Dreamweaver CS3还可以在当前站点中包含需要的JavaScript和CSS文件。

Spry工具条中包含了前面介绍的三组对象集，分别用于显示XML数据，表单元素验证和菜单与面板集。

Adobe Spry框架入门