將定期JavaScript實現與紅寶石在JavaScript實現

我在一個普通的index.html將定期JavaScript實現與紅寶石在JavaScript實現

<!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的結束，我想包括jQuery的軌道javascript和jQuery的-backstretch.min文件放入我的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>

但不幸的是他們兩人似乎是一個錯誤的軌道。

我該怎麼辦？

編輯：

我已經添加了修改過的文件到我的application.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>

但不幸的是仍然不正確

來源

2014-10-31 user3277633

jQuery是否設置在底部？也許問題來自'backstrectch'腳本。 – Vadorequest 2014-10-31 19:20:54

嗯我不確定你的意思。我應該將jquery移動到頂端嗎？ – user3277633 2014-11-01 03:18:06

當您調用'$ .backstretch'時，是否設置了$ $？ – Vadorequest 2014-11-01 10:16:37

我有，你可能可以使用的解決方案。 backstretch插件的javascript正在使用這種方法。我目前在一個頁面上使用它，因爲如果您將方法的require語句和javascript添加到application.js文件，Backstretch將在所有頁面上觸發。

步驟＃1的一個安裝寶石直道-導軌步驟＃2將// =需要直道步驟＃3添加<%= javascript_include_tag "jquery.backstretch" %>

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

到您index.html.erb視圖。 body標籤的頂部

第4步添加

Rails.application.config.assets.precompile += %w(jquery.backstretch.js) 
Rails.application.config.assets.precompile += %w(backstretch-landing-index.js)

到您的初始化/ assets.rb文件

裏面的直道進登陸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"對我來說

來源

2015-01-02 07:19:32 user3646743

將定期JavaScript實現與紅寶石在JavaScript實現

回答

相關問題