如何在Dreamweaver中使用jQuery创建可折叠面板 - 傻瓜

Dreamweaver中的jQuery UI手风琴小部件可轻松添加可折叠面板，网站访问者无需刷新网页即可打开和关闭该面板。这个jQuery特性使您能够更好地使用页面上的空间，在浏览器窗口中显示更少的空间信息。

您可以看到手风琴可折叠面板如何包含这个自然网站中每个歌手的名字，照片和栖息地偏好。其结果是，您可以轻松地在一页上看到所有鸟类的名字。要查看任何鸟的描述，用户只需要点击面板顶部的标签（鸟的名字出现在那里），并且面板立即打开。

<！ --1 - >

橙色鸣莺的照片和描述是打开的，而页面上的其他人是关闭的。 jQuery的美妙之处在于，页面不必重新加载，以便面板打开或关闭。在选项卡上单击一次即可立即打开面板。点击另一个标签，随着之前打开的面板关闭，该面板将打开。

<！ - 2 - >

可折叠面板可用于显示文本和图像以及多媒体文件，如音频，视频和Flash文件。

要在Web浏览器中显示手风琴面板（或Dreamweaver中的许多其他高级功能），您需要单击Dreamweaver工作区左上角的实时视图按钮。

<！在Dreamweaver中使用jQuery UI菜单创建一组手风琴面板后，可以使用属性检查器更改多个面板设置，如下面的说明所示。

按照以下步骤创建一个手风琴面板集：

将光标放在您要手风琴面板出现的页面上。

选择插入→jQuery UI→Accordion，或者单击jQuery UI插入面板中的Accordion项目。
一个带有三个面板的jQuery UI可折叠手风琴面板组出现在页面中。

在每个面板的顶部选择单词
部分，并将其替换为要在面板的“选项卡”区域中显示的文本。默认情况下，“选项卡”区域中的文本是纯文本，但可以通过更改相应的CSS规则或使用HTML标记（例如标题标记）来格式化文本来更改该文本。

在每个面板的主区域中选择单词
内容，然后输入要显示的任何文本或图像。您可以将文本粘贴到面板中，就像在网页的其他任何位置粘贴文本一样。类似地，您可以像在页面上的任何位置一样将图像插入到面板中：将光标置于面板中，选择插入→图像→图像，然后选择要显示的GIF，JPEG或PNG文件。如果要使用Dreamweaver优化图像，也可以选择Photoshop文件。

将文本粘贴到面板中时，请选择“编辑”→“选择性粘贴”以选择要在Dreamweaver中粘贴的文本中要保留的格式数量。限制保存的格式数量可以减少潜在的风格冲突。

要更改面板设置，请单击设计区域面板顶部的蓝色jQuery Accordion选项卡。
单击蓝色选项卡时，面板设置将显示在“属性”检查器中。（正确点击蓝色选项卡可能会非常棘手，所以请确保您单击蓝色区域。）单击页面上的任何其他位置，检查器将恢复为默认设置。

使用“属性”检查器中的“面板”字段添加或删除面板。
要添加面板，请单击面板字段右侧的加号（+）。要从手风琴设置中删除面板，首先在“属性”检查器的“面板”下拉列表中选择面板名称，然后单击减号（@@ min）。

您可以再次点击加号来添加另一个面板。

通过使用“事件”下拉菜单更改面板的打开方式。
“事件”设置控制当用户单击面板选项卡（单击）或滚动面板选项卡（鼠标悬停）上的光标时面板是否打开。

根据需要设置其他面板选项。
属性检查器中的手风琴选项是可选的，并且包括禁用任何或所有面板（禁用）的功能以及为面板打开和关闭的方式（动画下拉列表）设置动画。

选择文件→保存以保存页面;当“复制相关文件”对话框出现时，单击“确定”生成所有相关文件。
要使Spry功能正常工作，您必须在上传网页时将这些文件上传到Web服务器。

要更改面板的外观（如字体或文字颜色），请编辑相应的CSS规则。
注意：

在保存页面并且Dreamweaver已经生成相应的CSS和JavaScript文件之前，您无法编辑accordion面板的相应样式。 要查看面板如何显示在Web浏览器中，请单击工作区顶部的地球图标，然后选择要用来预览页面的浏览器。
当您使用计算机预览具有需要JavaScript或其他编程的交互式功能的页面时，某些Web浏览器（包括Internet Explorer）将显示一条警告，指出您必须允许ActiveX控件才能查看该页面。

这是一个安全性警告，只有当页面在保存页面的同一台计算机上打开时才会显示。如果您将页面发布到Web服务器，然后通过Internet连接查看，则不会为您或您的网站访问者显示此错误。