rails应用ajax之三:进一步完善ajax动画特效果
2015-01-12 19:58
253 查看
本猫已经对界面放低标准很久了,但是复习了ajax之后突然发现:哇!原来世界可以这么美,这么生动鲜活的!所以本篇主要讨论下如何用ajax在rails中做一些简单的动画效果。
其实最新版的的rails中使用的是coffeescript,它也是对js的高级封装,使其更贴近于ruby简洁灵动的语法。coffeescript暂时不校习鸟,以后补上吧!在rails旧版本中使用的js框架是prototype,其自带一个effects.js图像效果库。比如说我想在每次新插入user时将整ul元素背景短暂高亮,用prototype可以这样写:
高版本的rails自身已不带prototype鸟,需要安装prototype-rails gem然后将几个js文件拷贝到/public/javascripts目录下,然后在视图文件中包含js文件即可:
这里可以看到prototype的一些api的使用帮助:
http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html
我们知道js的另一个不错的框架是jQuery,它和prototype一般是不可以混用的。所以下面讲一下如何用jquery做出类似上面prototype的效果。比如说我想让每个新插入的user(2行包括name和age)都在插入时有短暂的高亮效果,用jquery可以这样写:
当然你不能包含prototype和effects了,你需要包含jquery:
值得说明的是在jquery中延时执行有2种方法一种是向上面代码中用js的函数setTimeout,不过在此函数的上下文中this的值会变,所以必须事先保存你需要的值,这也是我var _this = this;代码的用意。还有一种延时方法是用jquery中的函数delay,不过该函数是异步调用的,而且在上述情况下不能达到偶的要求,所以用的是setTimeout的方法。jquery的api帮助可以看:http://www.w3school.com.cn/jquery/index.asp
另外说一下,在调试html代码时用firefox的调试功能那时相当的酸爽哦,大家可以尝试下。
其实最新版的的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的调试功能那时相当的酸爽哦,大家可以尝试下。
相关文章推荐
- rails应用ajax之三:进一步完善ajax动画特效果
- rails应用ajax之三:进一步完善ajax动画特效果
- jQuery 动画中 缓动效果的应用 (转)
- PHP+jQuery实现Ajax分页效果:jPaginate插件的应用
- CSS伪类的动画和过渡效果应用
- Animation之震动效果动画在登录Activity上的应用
- 【Android】Animation之震动效果动画在登录Activity上的应用
- 10个应用 Javascript / Ajax 的标签切换效果
- Android应用通过AnimationDrawable实现View的动画效果
- CSS伪类的动画和过渡效果应用
- iPhone应用开发之十一:常用的三种动画表现效果
- Android Launcher如何去掉进入应用时的动画效果?
- iphone应用中的动画效果之loading效果和界面切换效果
- 第二版动画效果应用
- 【iphone应用开发】iPhone应用开发之十一:常用的三种动画表现效果
- CSS伪类的动画和过渡效果应用
- PHP+jQuery实现Ajax分页效果:jPaginate插件的应用
- 【iphone应用开发】iPhone应用开发之十一:常用的三种动画表现效果
- ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 AJAX 支持和丰富的界面效果
- 浏览器展示CSS伪类的动画和过渡效果应用