使用炫酷的 jQuery 特效设计引人注目的网站。Dreamweaver 与 jQuery 相结合,无需编写任何代码,即可加入滑块等特效。

添加 jQuery 效果

  1. 在 Dreamweaver 文档的“设计”或“代码”视图中,选择要对其应用 jQuery 效果的元素。

  2. 选择“窗口”>“行为”以打开“行为”面板。

  3. 单击加号图标,单击“效果”,然后单击所需效果。

    添加 jQuery 效果
    添加 jQuery 效果

    此时将显示包含所选效果的设置的自定义面板。

  4. 指定设置,例如将应用该效果的目标元素和效果的持续时间。

    目标元素可以与您最初选择的元素相同,也可以是页面上的不同元素。例如,如果您希望用户单击元素 A 以隐藏或显示元素 B,则目标元素是 B。

  5. 若要添加多个 jQuery 效果,请重复以上步骤。

    在您选择多重效果时,Dreamweaver 按这些效果在“行为”面板中的显示顺序中应用效果。若要更改效果的顺序,请使用面板顶部的箭头键。

Dreamweaver 会自动将相关代码插入您的文档。例如,如果已经选择“褪色”效果,则将插入以下代码:

  • 外部文件引用实现 jQuery 效果所需的依赖文件:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • 以下代码应用于正文标签中的元素:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • 将随以下代码添加一个脚本标签:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

基于事件的 jQuery 效果

在应用 jQuery 效果时,默认会将该效果指定给 onClick 事件。可以使用“行为”面板更改效果的触发事件。

  1. 选择所需页面元素。

  2. 在“窗口” >“行为”面板中,单击“显示设置事件”图标。

  3. 单击对应于当前所应用效果的行。请注意,第一列将更改为一个下拉列表,其中列出可从中选择的事件。

  4. 单击所需事件。

删除 jQuery 效果

  1. 选择所需页面元素。

    “行为”面板列出目前应用于所选页面元素的所有效果。

  2. 单击要删除的效果,然后单击“删除”图标。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略