Sin*_*ard 2 jquery ruby-on-rails
我是RoR的新手,也是jQuery的新手.目前,我有一个工作的RoR网站作为学习平台.我想包括一些jQuery基本功能来扩展我的学习(.mouseenter(),..hover(),. .fadeIn()等).
让我用一些代码设置场景(我剪断了部分以保持简短):
$ ruby -v
ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux]
$ rails -v
Rails 3.2.8
的Gemfile:
gem 'jquery-rails'
配置/ routes.rb文件:
root to: 'static_pages#home'
应用程序/控制器/ static_pages_controller.rb:
def home
@Presents = Present.all.reverse.take(20)
end
应用程序/视图/布局/ application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<div class="container-narrow">
<%= render 'layouts/header' %>
<%= yield %>
</div>
</body>
</html>
应用程序/资产/ Java脚本/ application.js中:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
应用程序/视图/ static_pages/home.html.erb:
<div class="jumbotron">
<h1>Heading</h1>
</div>
<%= render 'shared/list' %>
应用程序/视图/共享/ _list.html.erb:
<% if @Presents.any? %>
<%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>
应用程序/视图/共享/ _list_item.html.erb:
<div id="present">
<ul id="<%= list_item.id %>">
<span class="content">
Some content here
</span>
</div>
理想情况下,我希望我的jQuery以实现<div>用id="present".这是我的测试jQuery:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeIn('fast',1);
}
$('#present').mouseleave(function(){
$(this).fadeIn('fast',0.5);
}
});
目前,我有以上存储app/views/static_pages/home.js.erb,没有任何反应.这是一个合适的位置吗？或者我应该将它转移到app/views/shared/目录？
从我的渲染网站页面 - 有没有办法检查我的jQuery是否被包含和执行？我觉得我目前的阻塞点是我home.js.erb的位置.
编辑:我的jQuery中检测到的错误 - 更正如下:
jQuery的:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeTo('fast',1);
});
$('#present').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
并正确使用fadeTo.fadeIn在我尝试的时候,我不接受第二个不透明的论点.
您应该在app/assets/javascripts/与视图关联的控制器之后在名称中创建一个文件,例如对于名为home它的控制器:app/assets/javascripts/home.js然后在您的application.js文件中将其包含到资产管道中,如下所示:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require home
但是因为你已经有了//=require tree .上面的修改所以不application.js应该是必要的,但我建议你按照上面的方式进行,并单独包含所有文件,以便你可以更好地控制何时包含你的JS.
编辑:此外,我建议您将要使用的绑定从ID更改为要重用此功能的类.
出于测试目的,查看JS是否正在执行,您可以添加如下内容:
$(document).ready(function(){
$('#present').mouseenter(function(){
alert("MouseEnter!"); // This will create an alert box
console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
$(this).fadeIn('fast',1);
}
$('#present').mouseleave(function(){
alert("MouseLeave!"); // This will create an alert box
console.log("MouseLeave!");
$(this).fadeIn('fast',0.5);
}
});
这只是为了快速测试JS,你当然不应该把这些留在你的代码中.
另外,在第二次看JS之后你可能想尝试这样的事情:
$(document).ready(function(){
$('#present').mouseenter(function(){
$(this).fadeIn('fast',1);
}).mouseleave(function(){
$(this).fadeIn('fast',0.5);
});
});
注意结束 );
| 归档时间： |
|
| 查看次数： |
12880 次 |
| 最近记录： |