Rails支持的视觉效果（或者直接调用Scriptaculous）

Rails方法用法 Scriptaculous用法 效果简述 visual_effect(:fade, "target") new Effect.Fade("target",{}) 渐隐到全部消失 visual_effect(:appear, "target") new Effect.Appear("target",{}) 渐现到全部出现 visual_effect(:highlight, "target") new Effect.Highlight("target",{}) 高亮效    Rails方法用法 Scriptaculous用法 效果简述 visual_effect(:puff, "target") new Effect.Puff("target",{}); 放大、变淡到消失 visual_effect(:blind_down, "target") new Effect.BlindDown("target",{}) 向下逐渐展开到全部出现 visual_effect(:blind_up, "target") new Effect.BlindUp("target",{}) 向上逐渐收起到全部消失 visual_effect(:switch_off, "target") new Effect.SwitchOff("target",{}) 向中间压缩到逐渐消失 visual_effect(:slide_down, "target") new Effect.SlideDown("target",{}) 向下滑动到全部展开 visual_effect(:slide_up, "target") new Effect.SlideUp("target",{}) 向下滑动到全部收起 visual_effect(:drop_out, "target") new Effect.DropOut("target",{}) 整体向下掉、变淡到消失 visual_effect(:shake, "target") new Effect.Shake("target",{}) 左右抖动 visual_effect(:pulsate, "target") new Effect.Pulsate("target",{}) 颜色忽强忽淡地脉动 visual_effect(:squish, "target") new Effect.Squish("target",{}) 压缩到消失 visual_effect(:fold, "target") new Effect.Fold("target",{}) 卷起到消失 visual_effect(:grow, "target") new Effect.Grow("target",{}) 变大到全部出现 visual_effect(:shrink, "target") new Effect.Shrink("target",{}) 收缩到消失 ScriptaculousHelper模块提供了一个visual_effect方法来实现各种视觉效果，这些视觉效果并没有任何Ajax功能，但它们可以使人机界面更加友好。 实际上，Rails的视觉效果是依赖于Scriptaculous的视觉效果，因此我们也可以直接使用Scriptaculous来实现这些视觉效果。 使用visual_effect方法的语法格式如下： visual_effect(name, element_id = false, js_options = {}) 该方法中的name为视觉效果的名称，这个名称见表16.1；element_id指定该方法对哪个元素应用视觉效果，这个元素可以省略，如果该元素省略，需把该方法直接指定到某个元素，指定对该元素应用该视觉效果；js_options指定该视觉效果的选项。 如果我们不想通过Rails方法，而是直接通过Scriptaculous来指定某个元素的视觉效果，也是可行的。因为直接使用Scriptaculous指定视觉效果属于JavaScript代码，因此应该将其放在<script .../>元素中。 使用Scriptaculous直接指定视觉效果的语法格式如下： new Effect.XxxName(element_id, js_options = {})) XxxName指定的是视觉效果名，该名称参见表16.1，element_id和js_options = {}与visual_effect的后两个参数相同。 看下面页面代码使用了visual_effect方法实现元素的渐隐效果。 <!-- 目标元素 --> <div id="target" style="width:400px; height:80px;border:1px solid black;"> Spring2.0宝典<br> 轻量级J2EE企业应用实战<br> 基于J2EE的Ajax宝典<br> Struts2权威指南<br> </div> <!-- 单击该按钮渐隐上面的DIV元素 --> <input type="button" value="渐隐"     onClick='<%= visual_effect(:fade, "target", :duration => 1.0) %>'/> 在浏览器中查看该页面，将看到如下代码： <!-- 单击该按钮渐隐上面的DIV元素 --> <input type="button" value="渐隐"     onClick='new Effect.Fade("target",{duration:1.0});'/> 从上面的代码中不难看出，Rails的visual_effect方法实际上还是需要转换成new Effect.XxxName的用法。 值得指出的是，当我们使用visual_effect方法指 定视觉效果时，使用的代码是onClick='<%= visual_effect(:fade, "target", :duration => 1.0) %>'。注意，onClick后使用的是单引号，如果使用双引号将引起错误！为什么呢？因为visual_effect转换成new Effect.XxxName时，会把目标元素的id使用双引号括起来，如果我们也使用双引号，会导致生成如下代码。 <!-- 单击该按钮渐隐上面的DIV元素 --> <input type="button" value="渐隐"     onClick="new Effect.Fade("target",{duration:1.0});"/> 上面这行代码是错的，因为引号的配对出了问题，系统会把"new Effect.Fade("当成一个整体，而不是把"new Effect.Fade("target",{duration:1.0});"当成一个整体。