第十七章：Spry 框架技术
17.1 Spry 菜单栏
Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以为站点访问者提供更丰富的 Web 效果。有了 Spry ，就可以使用 HTML、CSS 和极少量的 JS 创建构件（比如折叠构件和菜单栏）。在设计上，Spry 框架的标记非常简单，且便于那些具有 HTML、CSS 和 JS 基础知识的用户使用。
17.1.1 插入 Spry 菜单栏
将光标放置在要插入位置，点击 插入 -> Spry -> Spry 菜单栏，或单击 “插入” 面板上的 “ Spry 菜单栏” ，打开 “ Spry 菜单栏” 对话框，在对话框中选择 “水平” 或 “垂直” 布局。
17.1.2 设置 Spry 菜单栏的属性
参数介绍：
- 菜单条： 在该文本框中可以为插入到页面中的 Spry 菜单栏命名。
- 自定义此 Widget： 可以链接到 Adobe 官网的相关页面。
- “禁用样式” 按钮： 可以禁用 Spry 菜单栏的 CSS 样式，以便查看 HTML 结构。
- 菜单项列表： 在 “属性” 面板中间显示有 3 个列表，从左至右为 “主菜单项列表”、“子菜单项列表”、“ 3 级菜单项列表”，每个列表中可以对相应的菜单项进行添加、删除以及调整顺序的操作。
- 文本： 更改选中的菜单项的名称。
- 链接： 为选中的菜单项设置相应的链接。
- 标题： 为选中的菜单项设置提示文本。
- 目标： 设置链接的打开方式，比如直接打开或是在新窗口中打开。
插入 Spry 内容后，保存页面时，会弹出 “复制相关文件” 窗口，点击确定后，会自动复制到站点目录的 SpryAssets 文件夹内。
17.1.3 设置菜单项的尺寸
可以通过更改菜单项的 li 和 ul 标签的 width 属性，来更改菜单项的尺寸。打开 SpryAssets 文件夹中的 SpryMenuBarHorizontal.css 文件，找到 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 规则：
ul.MenuBarHorizontal li{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
将 width 属性改为所需要的宽度，或更改为 auto 。然后添加 white-space: nowrap;。
17.2 Spry 选项卡式面板
17.2.1 插入 Spry 选项卡式面板
将光标放置于要插入位置，点击 插入 -> Spry -> Spry 选项卡式面板 ，或点击 “插入” 面板上的 “ Spry 选项卡式面板” 按钮即可。
17.2.2 设置 Spry 选项卡式面板的属性
参数介绍：
- 选项卡式面板： 可以为 Spry 选项卡式面板命名。
- 自定义此 Widget： 可以链接到 Adobe 官网的相关页面。
- 面板： 显示了该 Spry 选项卡式面板的各个面板，可以添加、删除面板或调整前后顺序。
- 默认面板： 选择某个面板，在默认情况下所选择的面板将显示，而其他面板将隐藏。
技术专题：自定义选项卡式面板的 CSS 样式
在插入 Spry 选项卡式面板时，会自动创建 SpryTabbedPanels.css 文件，并保存到 SpryAssets 文件夹中。
- 更改选项卡式面板的文本样式：
- 更改选项卡式面板的背景颜色：
17.2.3 调整 Spry 选项卡式面板的宽度
默认情况下，Spry 选项卡式面板的宽度会显示为 100% ，但可以通过 CSS 样式中的 width 属性来限制其宽度。
打开 SpryTabbedPanels.css ，找到 .TabbedPanels 规则，然后在 Width 属性中进行调整。
17.3 Spry 折叠式构件
17.3.1 插入 Spry 折叠式构件
点击 插入 -> Spry -> Spry 折叠式，或点击 “插入” 面板上的 “ Spry 折叠式” 按钮就即可。
17.3.2 设置 Spry 折叠式构件的属性
参数介绍：
- 折叠式： 为插入到页面的 Spry 折叠式构件命名。
- 面板： 可以进行添加和删除面板或调整顺序。、
技术专题：自定义折叠构件的 CSS 样式
- 更改折叠式构件的文本样式
- 更改折叠式构件的背景颜色
17.3.3 调整 Spry 折叠式构件的宽度
默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。
打开 SpryAccordion.css 找到 .Accordion 规则，添加 width 属性即可。
17.4 Spry 可折叠面板
17.4.1 插入 Spry 可折叠面板
点击 插入 -> Spry -> Spry 可折叠面板，或点击 “插入” 面板上的 “ Spry 可折叠面板” 按钮即可。
17.4.2 设置 Spry 可折叠面板的属性
参数介绍：
- 可折叠面板： 进行命名
- 显示： 可以设置 Spry 可折叠面板在 Dreamweaver CS6 的设计视图中是打开还是关闭，默认为 “打开” 。
- 默认状态： 设置在浏览器中浏览 Spry 可折叠面板时， Spry 可折叠面板的默认状态。
- 启用动画： 面板将缓缓地平滑打开和关闭。
技术专题：自定义 Spry 可折叠面板的 CSS 样式
- 更改折叠式面板的文本样式
- 更改折叠式面板的背景颜色
17.4.3 调整 Spry 可折叠面板的宽度
默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。
打开 SpryCollapsiblePanel.css 找到 .CollapsiblePanel 规则，添加 width 属性即可。
17.5 Spry 工具提示
Spry 工具提示可以在鼠标滑过某网页对象时显示一段文字，并在滑开时隐藏。
17.5.1 插入 Spry 工具提示
将光标放置于要插入位置，点击 插入 -> Spry -> Spry 工具提示 即可。
17.5.2 设置 Spry 工具提示的属性
参数介绍：
- Spry 工具提示： 给 Spry 工具提示命名。
- 触发器： 用于激活提示工具的元素。
- 跟随鼠标： 提示工具会跟随鼠标。
- 鼠标移开时隐藏： 只要鼠标离开触发器元素，工具提示就会自动关闭。
- 水平偏移量： 设置工具提示与鼠标的水平相对位置，单位为像素，默认为 20px。
- 垂直偏移量： 设置工具提示与鼠标的垂直相对位置，单位为像素，默认为 20px。
- 显示延迟： 设置工具提示出现的延迟，单位为毫秒，默认为 0。
- 隐藏延迟： 设置工具提示隐藏的延迟，单位为毫秒，默认为 0。
- 效果： 选择出现工具提示时的效果，有 “无”、“遮帘”、“渐隐” 3 种。
2354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
