rails应用ajax之三:进一步完善ajax动画特效果
来源:互联网 发布:阿里云服务器用来翻墙 编辑:程序博客网 时间:2024/05/05 12:20
本猫已经对界面放低标准很久了,但是复习了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的调试功能那时相当的酸爽哦,大家可以尝试下。
- rails应用ajax之三:进一步完善ajax动画特效果
- rails ajax jquery 应用
- rails应用ajax之二:使用rails自身支持
- jQuery 之 (三)事件绑定、动画效果、封闭ajax、三级联动、插件
- Rails Ajax
- RAILS AJAX
- rails ajax
- Ruby on Rails 中应用Ajax
- Ruby on Rails 中应用Ajax
- ajax的进一步运用
- ajax的进一步理解
- iOS应用开发之:常用三种动画表现效果
- Ajax 之实例应用
- Ajax之prototype应用
- ajax 之javascript 应用
- 初学Ajax之应用
- Ajax 之应用
- Ajax之"黄褪"效果
- 深入理解gtest C/C++单元测试经验谈
- 面向对象编程(上)
- web前端.js--seajs--把jquery改造标准CMD模块的方法
- linux多线程基础学习
- call by value 和 call by reference
- rails应用ajax之三:进一步完善ajax动画特效果
- STM32 学习七 USART通信1
- php瀑布流
- BZOJ 3834 Poi2014 Solar Panels 数论
- nginx 优化系列之worker_connections
- 函数
- hdu 4528 马拉松不错的广搜
- c#基础总结
- 几种方法来实现scp拷贝时无需输入密码