我在一个常规的index.html 中有以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style-responsive.css" rel="stylesheet">
</head>
<body>
<!-- A BUNCH OF OTHER CODE..... -->
<!-- THIS IS WHAT I WANT ! -->
<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("assets/img/solar.jpg", {speed: 500});
</script>
<!-- END OF WHAT I WANT -->
</body>
</html>
在index.html的末尾,我想将jqueryjavascript和jquery-backstretch.min文件合并到我的rails应用程序中。有标准的铁路方式吗?
我尝试将以下内容注入rails new.html.erb
<!-- js placed at the end of the document so the pages load faster -->
<%= javascript_include_tag '../assets/javascripts/jquery.js', 'data-turbolinks-track' => true %>
<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<%= javascript_include_tag '../assets/javascripts/jquery.backstretch.min.js"', 'data-turbolinks-track' => true %>
<script>
$.backstretch("assets/images/solar.jpg", {speed: 500});
</script>
和
<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/javascripts/jquery.js"></script>
<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
<script type="text/javascript" src="assets/javascripts/jquery.backstretch.min.js"></script>
<script>
$.backstretch("assets/images/solar.jpg", {speed: 500});
</script>
但不幸的是,他们似乎都错了。
我该怎么办?
编辑:
我已经将修改后的文件添加到我的应用程序.js中,所以现在看起来像这个
//= require jquery
//= require jquery_ujs
//= require jquery.backstretch.min
//= require turbolinks
//= require_tree .
从那以后,我从new.html.erb中删除了相应的脚本标记。现在,在底部,它只包含调用的脚本
<script>
$.backstretch("assets/images/solar.jpg", {speed: 500});
</script>
但不幸的是,这仍然是不正确的
我有一个您可能可以使用的解决方案。backstretch插件的javascript正在使用此方法。我目前在一个页面上使用它,因为如果您将该方法的require语句和javascript添加到application.js文件中,backstretch将在所有页面上触发。
步骤#1安装gem仰泳导轨步骤#2移除//=需要仰泳步骤#3添加<%= javascript_include_tag "jquery.backstretch" %>
<%= javascript_include_tag "backstretch-landing-index" %>
到您的index.html.erb视图。机身顶部标签
步骤#4添加
Rails.application.config.assets.precompile += %w( jquery.backstretch.js )
Rails.application.config.assets.precompile += %w( backstretch-landing-index.js )
到您的初始化程序/assets.rb文件
backstretch-landing-index.js内部添加要调用的函数
$.backstretch([
"http://dl.dropbox.com/u/515046/www/outside.jpg"
, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
, "http://dl.dropbox.com/u/515046/www/cheers.jpg"
], {duration: 3000, fade: 750});
它有效!!具有图像的全路径链接。"/assets/photo1.png"
for me