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

最新推荐文章于 2025-04-08 09:39:50 发布

wssxy

最新推荐文章于 2025-04-08 09:39:50 发布

阅读量621

点赞数

分类专栏： Ruby 文章标签： rails button javascript ajax fold 企业应用

Ruby 专栏收录该内容

38 篇文章

订阅专栏

^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方法实现元素的渐隐效果。

Spring2.0宝典<br>

轻量级J2EE企业应用实战<br>

基于J2EE的Ajax宝典<br>

Struts2权威指南<br>

</div>

<input type="button" value="渐隐"

onClick='<%= visual_effect(:fade, "target", :duration => 1.0) %>'/>

在浏览器中查看该页面，将看到如下代码：

<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使用双引号括起来，如果我们也使用双引号，会导致生成如下代码。

<input type="button" value="渐隐"

onClick="new Effect.Fade("target",{duration:1.0});"/>

上面这行代码是错的，因为引号的配对出了问题，系统会把"new Effect.Fade("当成一个整体，而不是把"new Effect.Fade("target",{duration:1.0});"当成一个整体。