[英]Javascript and Ruby on rails
我正在學習如何使用Ruby on Rails(RoR)創建網站。 我有一個2年前與JSP一起工作時創建的HTML模板,現在我想在RoR網站中重用它。 這是HTML檔案
<body>
<div id="container">
<ul id="nav">
<li><a href="index.html">Livingroom</a></li>
<li><a href="about.html">Bedroom</a></li>
<li><a href="#">Mattress</a></li>
<li id="selected"><a href="#">Bathroom</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Outdoor</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">SearchBar</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.Nav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
</html>
這是javascript文件jquery.Nav.js
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
})(jQuery);
在RoR項目的application.html.erb中,我包含了這樣的js文件
<%= javascript_include_tag "jquery.Nav.js" %>
但是,即使我放入$('#nav')。spasticNav();,我的主頁也無法正常工作。 在RoR項目的主體標簽中
<body>
<div class="container">
<%= render 'layouts/header'%>
<%=yield%>
<%= render 'layouts/footer'%>
</div>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
無論如何,將$('#nav')。spasticNav()嵌入到js文件中。 我嘗試了很多方法,但仍然無法正常工作。 非常感謝。
編輯:我在網上看到了一些示例,他們將函數嵌入到js文件中,如下所示。
jQuery(document).ready(function($){
/*---------------------------------
MENU Dropdowns
-----------------------------------*/
$('ul.menu').each(function(){
嘗試放入$('#nav').spasticNav();
放入$(document).ready
函數中,以便在頁面加載時執行:
<script type="text/javascript">
$(document).ready(function() {
$('#nav').spasticNav();
});
</script>
還要確保頁面上有#nav
元素。 我無法從您的html布局中分辨出您是否擁有它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.