上一篇日志介绍了如何在网页上应用各种Spry效果，这些效果是通过客户端JavaScript函数作用于HTML页面元素实现的。Spry构件则需要HTML、CSS和JavaScript的交互作用才能实现。在Spry构件中，HTML用于实现构件的层次结构，CSS用于定义构件的外观样式，JavaScript用于创建构件对象并将静态的HTML元素转换为具有交互性的用户界面元素。

一、Spry构件概述
构件（Widget）是各种Ajax框架的一个共同特征。严格地说，构件并未应用Ajax技术，即构件通常不适用XMLHTTP请求对象，但构件属于下一代Web用户界面，因此也把构件归类于“Ajax”。
Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。在网页中可以采用最简单的HTML和CSS代码方便的插入这些构件，然后设置构件的样式。
Spry构件是一个页面元素，它通过启用用于交互来提供更丰富的用户体验。Spry构件由三部分组成：

Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联。CSS文件中包含设置构件样式所需的全部信息，而JavaScript文件则赋予构件功能。对于一个给定构件都有相关联的CSS样式表文件和JavaScript脚本文件，它们都是根据该构件来命名的，例如，与折叠构件相关联的文件是SpryAccordion.css和SpryAccordion.js。

二、通过可视化方式插入Spry构件
从Dreamweaver CS3中，可以通过菜单或工具栏插入构件：

点击对应的按钮，插入构件：

插入构件后，可以在属性检查器中设置相关属性，并通过样式面板对默认的样式进行修改，若构件为折叠等带隐含页面的外观，可用鼠标移动到相应面板的右下角处，自动显示“眼睛”的图标后，点击它即可切换到对应的面板上。

三、通过修改代码强化Spry构件
Spry构件设计的代码量比较大，而且不同的构建其使用的HTML代码块并不相同，因此，我们更多的是修改已插入的Spry构件，而完成可视化工具没有提供的功能。例如：设置构件的宽度、在菜单栏构件添加更多级别的子菜单。
菜单栏构件提供两种：水平菜单栏构件和垂直菜单栏构件。它们使用不同的CSS样式表。
1、添加JavaScript和CSS标记
插入菜单栏构件后，会自动在页面首部添加JavaScript和CSS标记：


※ 在link标记中指定的SpryMenuBarHorizontal.css仅用于定义水平菜单栏构件的CSS规则。而垂直菜单栏构件则应为SpryMenuBarVertical.css的CSS文件

2、HTML代码
菜单栏构件使用ul和li标记表示每个菜单项。最外层容器元素是一个ul 标记，并且设定了一个id属性，以便下面的利用JavaScript代码，把静态的HTML代码转换为交互式的页面元素。
在首层ul标记中对于每个顶级菜单项都包含一个li 标记，而顶级菜单项（li 标记）又包含用来为每个菜单项定义子菜单的ul 和li 标记，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。


3、转为JavaScript对象
如果要实现交互式的效果，就必须把静态的HTML代码转换为一个具有交互性的用户界面组件。这些代码，必须放在HTML代码的后面。通过new运算符和Spry.Widget.MenuBar构造函数创建一个JavaScript对象，调用这个构造函数时，需要传递两个参数，第一个参数时菜单栏构件最外层容器的ID，第二个参数以一个对象直接量出现，其中imgDown和imgRight属性分别指定一个小图片的URL，可显示在菜单栏中。


4、CSS代码
在SpryMenuBarHorizontal.css和SpryMenuBarHorizontal.css文件中，包含用于设置菜单栏构件的CSS规则。通过编辑这些规则可以设置菜单栏的外观样式。这些CSS文件中的类名直接对应于菜单栏构件的HTML代码中指定的类名。
当然，也可以使用自己的类名来替换这些CSS文件中与样式相关的类名，这是不会影响菜单栏构件的功能的，仅是外观而已。
如希望在菜单栏文字前面或后面添加图片，修改背景颜色，那修改CSS或添加新的CSS类属性，就是最方便的做法。
演示：
代码：

四、其他Spry构件
Dreamweaver CS3 只为Spry 1.4构件提供了可视化设计工具，但Spry 1.6提供的几个Spry构件，包括滑动面板、HTML面板和工具提示等都需要手动编写代码。
这几个代码都是通过把静态HTML代码的div块，并根据特定的构件标记ID转换为JavaScript对象实例，然后调用对应的实例方法以实现交互的效果。具体可查看Spry 1.6.1自带说明。