2024年6月13日发(作者：)

Spry框架

导入语：

Spry框架是一个可以用来构建更加丰富的Web页的JavaScript和CSS库，可以显示XML数据，

并创建用来显示动态数据的交互式页面元素，而无需刷新整个页面。

主要内容：

Spry框架的概念

Spry菜单栏

Spry选项卡式面板构件

Spry折叠构件

3.4 Spry框架的概念

3.4。1 Spry框架的概念

Spry框架由三部分组成：

构建结构：用来定义构件结构组成的HTML代码块。

构建行为：用来控制构件如何响应用户启动事件的JavaScript。

构件样式:用来指定构件外观的CSS。

所有的Spry构件集中在【插入】｜【Spry】选项卡中.

【插入】|【布局】中显示了四个常用的Spry按钮。

3。4.2 Spry菜单栏构件

菜单栏构件效果如图所示。

方法：选择【布局】｜【Spry菜单栏】按钮，选择水平或垂直。然后在如下视图【属性】面板中设置各参

数及菜单名称、调整各菜单的位置。

其中标题为鼠标指向菜单栏目时的提示文字。

3.4.3 Spry选项卡式面板构件

Spry选项卡式面板效果如图所示，在浏览时，选择不同的选项卡会显示不同的内容。

方法：将光标定位后,选择【布局】｜【Spry选项卡面板】按钮。然后在如下视图【属性】面板中设置选项

卡构件名称、选项卡名称。然后在内容中插入相应内容。

3.4.4 Spry折叠构件

Spry折叠构件是可以折叠的面板，可以将大量内容存储在一个紧凑的空间中，可以通过单击该面板上的选

项卡来隐藏或显示。

1、 Spry折叠式构件

效果如图所示。

方法:将光标定位后，选择【布局】｜【Spry折叠式构件】按钮。然后在如下视图【属性】面板中设置折叠

式构件名称、选项卡名称.然后在内容中插入相应内容.

2、 Spry可折叠面板构件

方法：将光标定位后，选择【布局】｜【Spry可折叠面板】按钮.然后在如下视图【属性】面板中设置可折

叠面板名称、显示、默认状态、启用动画。然后在内容中插入相应内容。

默认状态为浏览时的默认状态;启动动画为打开折叠面版时是否为动画打开，还是直接打开。

课堂练习：

见书3.7 可隐藏的说明书。

小结：

本节课主要学习Spry框架的四种构件。

作业：

书上P78一题3、4、5；二题5；三题4、5；四题2.