0

我有一个 html 文件，我需要用 Rails 样式重写它。我试图阅读 Rails 指南，但找不到太多有用的信息。这是我拥有的 HTML 的一部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<% content_for :head do -%>
  <%= stylesheet_link_tag 'css.css' %>

<% end %>

<head>
<title>index</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
<script language="JavaScript" type="text/javascript" src="images/jquery-1.7.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.infiniteCarousel.js">        
</script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.tbSwitching.js"></script>
<script language="JavaScript" type="text/javascript" src="images/myfocus-1.2.4.full.js"></script>
<script language="JavaScript" type="text/javascript" src="images/mF_expo2010.js"></script>
<link href="images/mF_expo2010.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="top">
 <div class="one">
     <div class="one1">
         <img src="images/ico1.png"  width="225" height="58"/>
     </div>
     <div class="one2">
         <div class="one3">
              <div class="one4">Login/Sign up</div> 
              <div class="one4">Create an Account </div>    
              <div class="one5">shopping bag</div>   
         </div>
     </div>
  </div>
</div>
<div class="two">
<% content_for :below_body do -%>
  <%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
  <%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
 <%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
 <%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
     <%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>   

<script>
$(function(){
    $("#top .two3").hover(function(){   
    $("#top .two3").removeClass("on").next(".two4").removeClass("ac");
    $(this).addClass("on").next(".two4").addClass("ac");        
},function(){   

});
})
</script>
<script>
$(function(){
    $("#top .two5 a").hover(function(){     
    $(this).addClass("on");     
},function(){   
    $(this).removeClass("on");
    });
})
</script>
......
</body>
</html>

我试图通过在 body 标签内使用下面的代码来修改它，但似乎没有用。

<% content_for :below_body do -%>
    <%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
    <%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
    <%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
    <%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
    <%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>

我应该把它放在头里吗？我也应该对标签做任何事情吗？谢谢

4

2 回答 2

0

一般的经验法则是库应该放在头部（如 jQuery），所有其他使用 jQuery 的代码都应该放在代码下面。这样做的原因是，您想要作为 jQuery 的 DOM 元素与之交谈的所有内容都必须在文档中呈现（即在您的 js 代码上方）。

我通常做的是在页面末尾附加所有内容，即所有脚本。这样页面本身的加载时间就会减少，因为来自 HTTP 的请求不会先加载 JS，然后再加载 HTML。

于 2012-11-23T18:39:55.067 回答
0

你遇到了什么错误？如果没有看到错误，我们必然无法知道问题来自哪里。

您是否将 JS 文件保存在 JS 文件中rails_root/app/assets/javascripts/images？这就是你上面所说的。

例如<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>，将创建此标签：<script type="text/javascript" src="/javascripts/images/jquery-1.7.1.min.js?1284139606"></script>，并带有与文件构建时间相关的时间戳。

如果您在生产模式而不是开发模式下运行服务器，这也可能是一个问题。在生产模式下，您需要预编译您的资产：rake assets:precompile.

于 2012-11-23T18:42:17.237 回答