将常规javascript实现转换为ruby on rails javascript实现_Javascript_Ruby On Rails_Ruby On Rails 4_Asset Pipeline

将常规javascript实现转换为ruby on rails javascript实现

javascript ruby-on-rails ruby-on-rails-4

将常规javascript实现转换为ruby on rails javascript实现,javascript,ruby-on-rails,ruby-on-rails-4,asset-pipeline,Javascript,Ruby On Rails,Ruby On Rails 4,Asset Pipeline,我在常规index.html中有以下代码 <!DOCTYPE html> <html lang="en"> <head> <title>Template</title>  <link href="assets/css/bootstrap.css" rel="stylesheet"> <!--external css

我在常规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>

此后，我从new.html.erb中删除了相应的脚本标记。现在，在底部，它只包含脚本调用

<script>
    $.backstretch("assets/images/solar.jpg", {speed: 500});
</script>


$.backstretch（“assets/images/solar.jpg”，{speed:500}）；

但不幸的是，这仍然是错误的

我有一个解决方案，您可以使用。backstretch插件的javascript正在使用此方法。我目前在一个页面上使用它，因为如果将require语句和方法的javascript添加到application.js文件中，backstretch将在所有页面上触发

步骤#1安装gem反拉伸导轨步骤#2移除/=需要反向拉伸步骤3添加

到您的初始值设定项/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”

对于我来说

jQuery是否设置在底部？可能问题出在

backstruch

script.hmm我不知道你的意思。我应该将jquery移到顶部吗？当您调用

$.backstretch

时，是否设置了

？

//= require jquery
//= require jquery_ujs
//= require jquery.backstretch.min
//= require turbolinks
//= require_tree .

<script>
    $.backstretch("assets/images/solar.jpg", {speed: 500});
</script>

<%= javascript_include_tag "backstretch-landing-index" %>

 Rails.application.config.assets.precompile += %w( jquery.backstretch.js )
 Rails.application.config.assets.precompile += %w( 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});