rails应用ajax之三:进一步完善ajax动画特效果

前端之家收集整理的这篇文章主要介绍了rails应用ajax之三:进一步完善ajax动画特效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本猫已经对界面放低标准很久了,但是复习了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

另外说一下,在调试HTML代码时用firefox的调试功能那时相当的酸爽哦,大家可以尝试下。

猜你在找的Ajax相关文章