本猫已经对界面放低标准很久了,但是复习了ajax之后突然发现:哇!原来世界可以这么美,这么生动鲜活的!所以本篇主要讨论下如何用ajax在rails中做一些简单的动画效果。
其实最新版的的rails中使用的是coffeescript,它也是对js的高级封装,使其更贴近于ruby简洁灵动的语法。coffeescript暂时不校习鸟,以后补上吧!在rails旧版本中使用的js框架是prototype,其自带一个effects.js图像效果库。比如说我想在每次新插入user时将整ul元素背景短暂高亮,用prototype可以这样写:
new Effect.Highlight('users'); new Insertion.Bottom('users','<%= escape_javascript(render @user)%>');
高版本的rails自身已不带prototype鸟,需要安装prototype-rails gem然后将几个js文件拷贝到/public/javascripts目录下,然后在视图文件中包含js文件即可:
<%= javascript_include_tag 'prototype','effects' %>
这里可以看到prototype的一些api的使用帮助:
http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html
我们知道js的另一个不错的框架是jQuery,它和prototype一般是不可以混用的。所以下面讲一下如何用jquery做出类似上面prototype的效果。比如说我想让每个新插入的user(2行包括name和age)都在插入时有短暂的高亮效果,用jquery可以这样写:
$("<%= escape_javascript(render @user)%>").hide().css("background-color","yellow").appendTo("#users"); var color = $("#users li:first").css("background-color") $("#users li:eq(-1),li:eq(-2)").fadeIn("slow",function(){ //var color = $(this).css("background-color"); var _this = this; //$(this).css("background-color","yellow"); setTimeout(function(){ $(_this).css("background-color",color); },500); });
当然你不能包含prototype和effects了,你需要包含jquery:
<%= javascript_include_tag 'jquery' %>
值得说明的是在jquery中延时执行有2种方法一种是向上面代码中用js的函数setTimeout,不过在此函数的上下文中this的值会变,所以必须事先保存你需要的值,这也是我var _this = this;代码的用意。还有一种延时方法是用jquery中的函数delay,不过该函数是异步调用的,而且在上述情况下不能达到偶的要求,所以用的是setTimeout的方法。jquery的api帮助可以看:http://www.w3school.com.cn/jquery/index.asp